Fix MotionConfig does not propagate changes to transition

CHANGELOG.md

@@ -2,6 +2,10 @@
 
 Framer Motion adheres to [Semantic Versioning](http://semver.org/).
 
+### Fixed
+
+-   `MotionConfig` propagates changes to transition. 
+
 ## [5.5.5] 2021-12-17
 
 ### Fixed

src/components/MotionConfig/__tests__/MotionConfig.test.tsx

@@ -0,0 +1,30 @@
+import * as React from "react"
+import { render } from "@testing-library/react"
+import { MotionConfig } from ".."
+import { MotionConfigContext } from "../../../context/MotionConfigContext"
+
+const consumerId = "consumer"
+
+const Consumer = () => {
+    const value = React.useContext(MotionConfigContext)
+    return <div data-testid={consumerId}>{value.transition!.type}</div>
+}
+
+const App = ({ type }: { type: string }) => (
+    <MotionConfig transition={{ type }}>
+        <Consumer />
+    </MotionConfig>
+)
+
+it("Passes down transition", () => {
+    const { getByTestId } = render(<App type="spring" />)
+
+    expect(getByTestId(consumerId).textContent).toBe("spring")
+})
+
+it("Passes down transition changes", () => {
+    const { getByTestId, rerender } = render(<App type="spring" />)
+    rerender(<App type="tween" />)
+
+    expect(getByTestId(consumerId).textContent).toBe("tween")
+})

src/components/MotionConfig/index.tsx

@@ -40,15 +40,10 @@ export function MotionConfig({ children, ...config }: MotionConfigProps) {
      * Creating a new config context object will re-render every `motion` component
      * every time it renders. So we only want to create a new one sparingly.
      */
-    const transitionDependency =
-        typeof config.transition === "object"
-            ? config.transition.toString()
-            : ""
-
-    const context = useMemo(() => config, [
-        transitionDependency,
-        config.transformPagePoint,
-    ])
+    const context = useMemo(
+        () => config,
+        [JSON.stringify(config.transition), config.transformPagePoint]
+    )
 
     return (
         <MotionConfigContext.Provider value={context as MotionConfigContext}>