react: useEffect callback never called

Here is somewhat minimal reproduction:

function useTest() {
  const [effect, setEffect] = useState(false);
  useEffect(() => {
    setEffect(true);
  }, []);

  return effect;
}

function A() {
  const effect = useTest();

  return (
    <div >
      {"" + effect}
      {effect && <B/>}
    </div>
  );
}

function B() {
  const effect = useTest();

  return (
    <div >
      {"" + effect}
      {effect && <C/>}
    </div>
  );
}


function C() {
  const effect = useTest();

  return (
    <div >
      {"" + effect}
    </div>
  );
}

function Other() {
  useEffect(() => {}, []);
  return null;
}


ReactDOM.render(
  <A/>,
  document.querySelector("#root1")
);

ReactDOM.render(
  <Other/>,
  document.querySelector("#root2")
);

Some observations:

• If you change the order of render()s, it works
• If you use useLayoutEffect, it works
• If Other doesn’t call useEffect, it works
• If the second render() is delayed, it works
• If B or C are rendered unconditionally, it works
• If setEffect is delayed, it works

https://github.com/react-navigation/hooks#only-for-react-navigation-v3--v4-not-v5

Fix released in 16.12.0

@WxSwen: I have no solution for the bug, but I found a workaround that works for me. Depending on your requirements, it might or might not help you, but I thought I might just share it. 😃

It seems the problem occurs when I have multiple React instances on the page (multiple ReactDOM.render() calls). And shortly after I found this bug and opened the issue, I also ran into another challenge with multiple React instances: I wanted to share context between all components on the page, but for that to work, they must be in the same React render tree.

So what I ended up with was to go back to a single React instance. Instead, I call ReactDOM.render() only once, render into a disconnected <div>, and use React portals to render my individual components into their respective places on the page. For example:

const appRoot = document.createElement("div"); // This div is never attached to the DOM
const comp1Root = document.querySelector("#root1");
const comp2Root = document.querySelector("#root2");
ReactDOM.render(
  <>
    {/* I can place shared context providers here, if I want */}
    {ReactPortal.create(<Comp1 />, comp1Root, "root1")}
    {ReactPortal.create(<Comp2 />, comp2Root, "root2")}
  </>,
  appRoot
);

@kunukn Sorry, I forgot to add an effect condition. I changed the useEffect() call (see diff), but the result stays the same: Components level 3 and beyond don’t render.

edit: Tested my change in your codesandbox, saw that I missed the level variable as an effect dependency, updated my repository again. Still the same error - as you can see from the missing console.log() output, the effect callback doesn’t even get called once.