Make assert stable ref error more explicit

Reviewed By: ivanmisuno

Differential Revision: D46359534

fbshipit-source-id: 002e4e8ae9168cf2cf3b652fc853416de825861f

desktop/flipper-plugin/src/ui/__tests__/useLocalStorage.node.tsx

@@ -102,6 +102,6 @@ test('it does not allow changing key', async () => {
       console.error = orig;
     }
   }).toThrowErrorMatchingInlineSnapshot(
-    `"[useAssertStableRef] An unstable reference was passed to this component as property 'key'. For optimization purposes we expect that this prop doesn't change over time. You might want to create the value passed to this prop outside the render closure, store it in useCallback / useMemo / useState, or set a key on the parent component"`,
+    `"[useAssertStableRef] An unstable reference was passed to this component as property 'key'. For optimization purposes we expect that this prop doesn't change over time. You might want to create the value passed to this prop outside the render closure, store it in useCallback / useMemo / useState, or set a key on the parent component. Prev value: x. New value: y"`,
   );
 });

desktop/flipper-plugin/src/utils/useAssertStableRef.tsx

@@ -20,7 +20,7 @@ export const useAssertStableRef = !isProduction()
       const ref = useRef(value);
       if (ref.current !== value) {
         throw new Error(
-          `[useAssertStableRef] An unstable reference was passed to this component as property '${prop}'. For optimization purposes we expect that this prop doesn't change over time. You might want to create the value passed to this prop outside the render closure, store it in useCallback / useMemo / useState, or set a key on the parent component`,
+          `[useAssertStableRef] An unstable reference was passed to this component as property '${prop}'. For optimization purposes we expect that this prop doesn't change over time. You might want to create the value passed to this prop outside the render closure, store it in useCallback / useMemo / useState, or set a key on the parent component. Prev value: ${ref.current}. New value: ${value}`,
         );
       }
     }