useEffect not updating with array

[davetapley]

I've now convinced myself this isn't a bug, but I created a repro ⬇️ in a sandbox prior to realizing what was happening, so I thought others might benefit from seeing it 👀

https://codesandbox.io/s/mobx-observable-array-with-react-lfh61?file=/src/App.tsx

---

The real gotcha for me was that I'd incorrectly assumed that MobX would bring some magic that would allow changes to the array to cause the useEffect to trigger.

I don't know why I assumed this 🤪

[iChenLei]

simple debug

// packages/react-reconciler/src/ReactFiberHooks.new.js
function updateEffectImpl(fiberFlags, hookFlags, create, deps): void {
  const hook = updateWorkInProgressHook();
  const nextDeps = deps === undefined ? null : deps;
  let destroy = undefined;

  if (currentHook !== null) {
    const prevEffect = currentHook.memoizedState;
    destroy = prevEffect.destroy;
    if (nextDeps !== null) {
      const prevDeps = prevEffect.deps;
      if (areHookInputsEqual(nextDeps, prevDeps)) {   👈🏻   // <- Here is the key of your problem
        hook.memoizedState = pushEffect(hookFlags, create, destroy, nextDeps);
        return;
      }
    }
  }

You can noticed that the nextDeps and prevDeps is same. So React think deps isn't changed so don't fire effect.

Value vs. Reference

When you change the array value , the nextDeps and prevDeps's value is still same cause they use same Reference.

solution

+ const arr = array.slice(0);
  useEffect(() => {
    console.log(arr);
  }, [arr]);

or other immutable way .

btw, this is not mobx's problem, it's something about immutable 、reference and javascript self. hope it's useful for you.

[mweststrate]

See also: https://mobx.js.org/react-integration.html#useeffect

[davetapley]

@mweststrate so the theory makes sense, but I'm getting weird results.

I've forked my sandbox to use autorun and the empty dependency array [] as given in that link here, but it:

1. Causes eslint error React Hook useEffect has a missing dependency... (which kinda makes sense), and:
2. Means neither the bool (i.e. by value) nor array (by reference) functions are triggered.

If I add the corresponding variable to the dependency array then we're back to the original behavior.

If I omit the dependency array argument to useEffect then it works, but that feels wrong 🤔

[davetapley]

Thank you @iChenLei! That has explained a lot for me 🙏🏻

I wonder why mobx-state-tree aren't using box, I will ask over there.

[iChenLei]

@davetapley sorry, sir. Maybe I am misleading you by my poor english. mobx-state-tree didn't do nothing wrong.
You get a primitive values cause you use Destructuring assignment , same with outdate mobx-react doc case (https://mobx-react.js.org/state-destruct)

const View = observer(({ model: { array, bool } }: ViewProps) => {  👈🏻

use case only mobx and mobx-state-tree https://jsfiddle.net/ichenlei/ace458dw/24/

previous commnet contain some mistake info, so I hide my comment.