fix(usePrevious): opt out usePrevious hook from React Compiler

[lumirlumir]

Overview

This PR adds the 'use no memo' directive to the usePrevious hook to prevent React Compiler from throwing when panicThreshold is set to anything other than 'none'.

For example, without this directive, using this hook with babel-plugin-react-compiler and panicThreshold: 'critical_errors' throws the following error:

Error Log

ReactCompilerError: Found 8 errors:

Error: Cannot access refs during render

React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef).

  23 |     const currentRef = useRef(state);
  24 |     const isFirstRender = useRef(true);
> 25 |     if (isFirstRender.current) {
     |         ^^^^^^^^^^^^^^^^^^^^^ Cannot access ref value during render
  26 |         isFirstRender.current = false;
  27 |         return prevRef.current;
  28 |     }

Error: Cannot access refs during render

React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef).

  24 |     const isFirstRender = useRef(true);
  25 |     if (isFirstRender.current) {
> 26 |         isFirstRender.current = false;
     |         ^^^^^^^^^^^^^^^^^^^^^ Cannot update ref during render
  27 |         return prevRef.current;
  28 |     }
  29 |     if (!compare(currentRef.current, state)) {

Error: Cannot access refs during render

React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef).

  25 |     if (isFirstRender.current) {
  26 |         isFirstRender.current = false;
> 27 |         return prevRef.current;
     |                ^^^^^^^^^^^^^^^ Cannot access ref value during render
  28 |     }
  29 |     if (!compare(currentRef.current, state)) {
  30 |         prevRef.current = currentRef.current;

Error: Cannot access refs during render

React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef).

  27 |         return prevRef.current;
  28 |     }
> 29 |     if (!compare(currentRef.current, state)) {
     |                  ^^^^^^^^^^^^^^^^^^ Passing a ref to a function may read its value during render
  30 |         prevRef.current = currentRef.current;
  31 |         currentRef.current = state;
  32 |     }

Error: Cannot access refs during render

React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef).

  28 |     }
  29 |     if (!compare(currentRef.current, state)) {
> 30 |         prevRef.current = currentRef.current;
     |         ^^^^^^^^^^^^^^^ Cannot update ref during render
  31 |         currentRef.current = state;
  32 |     }
  33 |     return prevRef.current;

Error: Cannot access refs during render

React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef).

  28 |     }
  29 |     if (!compare(currentRef.current, state)) {
> 30 |         prevRef.current = currentRef.current;
     |                           ^^^^^^^^^^^^^^^^^^ Cannot access ref value during render
  31 |         currentRef.current = state;
  32 |     }
  33 |     return prevRef.current;

Error: Cannot access refs during render

React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef).

  29 |     if (!compare(currentRef.current, state)) {
  30 |         prevRef.current = currentRef.current;
> 31 |         currentRef.current = state;
     |         ^^^^^^^^^^^^^^^^^^ Cannot update ref during render
  32 |     }
  33 |     return prevRef.current;
  34 | }

Error: Cannot access refs during render

React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef).

  31 |         currentRef.current = state;
  32 |     }
> 33 |     return prevRef.current;
     |            ^^^^^^^^^^^^^^^ Cannot access ref value during render
  34 | }
  35 |

As this is simple directive addition, and currently babel-plugin-react-compiler setup is not set in this repo, I've skipped the test on it.

Checklist

• Did you write the test code?
• Have you run yarn run fix to format and lint the code and docs?
• Have you run yarn run test:coverage to make sure there is no uncovered line?
• Did you write the JSDoc?

[changeset-bot]

🦋 Changeset detected

Latest commit: 2db5ed2

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
react-simplikit	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[Copilot]

Pull request overview

Opt out the usePrevious hook from React Compiler memoization to prevent babel-plugin-react-compiler (with non-none panicThreshold) from erroring on intentional useRef().current access/updates during render.

Changes:

• Add the 'use no memo' directive to usePrevious to disable React Compiler handling for this hook.
• Add an inline comment explaining why the directive is needed.

[kimyouknow]

Hi @lumirlumir — thanks for catching this! 'use no memo' is exactly the right opt-out: usePrevious intentionally reads and writes refs during render, which the React Compiler flags when panicThreshold !== 'none', so explicitly bailing out is the correct fix. One line, no behavioral change, and the patch changeset is spot on.

Quick note on my side: CI hasn't run on the fork branch yet, so I'll kick off the workflow and merge once it's green. Really appreciate the fix!