Bug: StrictMode is not preventing side effects

[theKashey]

React version: any with StrictMode

Steps To Reproduce

1. Create a few components with improper or absent memoization
2. Create useEffect with unstable dependency
3. Observe how StrictMode is not able to help here

• Incorrect code

const {propA, propB, ...rest} = propsC;

useEffect(() => {
  // some effect not expected executed on every render
}, [rest]);
// ^^ rest is "unstable"

<Component
  onSomething={() => {}}
  // we dont know what  Component will do with unstable callback. May be something, may be not
/>

• Correct code

const {propA, propB, rest} = useMemo(() => {
  const {propA, propB, ...rest} = propsC;
  return {propA, propB, rest};
}, [propC]);

useEffect(() => {
 // some effect not expected executed on every render
}, [rest]);
// ^^ rest is "stable"

<Component
  onSomething={useCallback(() => {},[])}
/>

The current behavior

If a function is pure, running it twice does not change its behavior because a pure function produces the same result every time. However, if a function is impure (for example, it mutates the data it receives), running it twice tends to be noticeable (that’s what makes it impure!) This helps you spot and fix the bug early.

https://react.dev/reference/react/StrictMode

I personally never found this behaviour any helpful. It never helped me find a bug, especially a bug related to useEffect.

The expected behavior

I would assume that StrictMode should not try to execute useEffect twice - it should render Component twice and ensure no useEffect or useMemo is invalidated.
Ideally, it should cause full application re-render to detect memoization issues spanning across multiple components, like using children in effect dependencies or passing unstable prop to a component with useEffect as such case cannot be detected by isolated re-render.

---

React Forget is going to change the game rules and automatically fix the problems from above, but how one can prove it without having a corresponding testing functionality one can trust?
Unfortunately, this is something very hard to implement in the user space, simultaneously something causing incidents (performance as well as reliability) on a weekly basic

[eps1lon]

const {propA, propB, rest} = useMemo(() => {
  const {propA, propB, ...rest} = propsC;
  return {propA, propB, rest};
}, [propC]);

useEffect(() => {
 // some effect not expected executed on every render
}, [rest]);
// ^^ rest is "stable"

Keep in mind that useMemo has no semantic guarantees. React could decide at any point that it reruns the memoized function because it freed up memory used by the memoized result. The rest
value would change even though propsC didn't. That's why StrictMode also runs the function passed to useMemo twice.

it should render Component twice and ensure no useEffect or useMemo is invalidated

I think this would be interesting to try out in an experiment. Could be a PR for starters. At a glance, seems reasonable to expect effect dependencies to be stable between double render. You'd also expect the committed HTML to be stable.

[theKashey]

any point that it reruns the memoized function

Not really a problem if React from time to time resets one or another branch. It is a problem if such a reset happens on every render.

You'd also expect the committed HTML to be stable.

This could be a little extension to the definition of a pure function - not only produces the same output for the same input, but also runs exactly the same effects so React can optimise run once for any number of render calls.

It is very important to have this check at the lowest level (React) as optimisations in other places may only temporarily hide the problem. See reduxjs/react-redux#2160 as an example