React hooks question (or bug report?)

Heyyyy team,

How’s everyone doing? 😄

I was trying out React hooks and was rewriting one of my side project but a buggy issue caught me. I created a repro case here.

The case is:

function App() {
  let store = {};
  const [authStatus, updateAuthStatus] = useState(false);

  useEffect(() => {
    asyncHelper().then(() => {
      store = {
        nested: {
          value: 'Hello World',
        },
      }
      // people will naturally believe store is updated when auth status is true
      // but it's actually not
      updateAuthStatus(true);
    });
  }, []);

  if (!authStatus) {
    return <h1>Loading...</h1>
  }

  return (
    // will throw an error here (store hasn't been updated)
    <h1>{store.nested.value}</h1>
  );
}

I’m casting/updating a new value to store in useEffect, assuming that it works similarly with cDM, and then update the authStatus. But the last line when it tries to render <h1>{store.nested.value}</h1>, it’ll throw the error “cannot read value of undefined” because store hasn’t been updated this time.

It’s very natural to have this operation sequence in mind:

1. render the loading state
2. run useEffect
3. store gets updated
4. auth status gets updated
5. render the correct value

However it works as expected if I also wrap the store with a local state:

function App() {
  const [store, updateStore] = useState({});
  const [authStatus, updateAuthStatus] = useState(false);

  useEffect(() => {
    asyncHelper().then(() => {
      updateStore({
        nested: {
          value: 'Hello World',
        },
      })
      
      updateAuthStatus(true);
    });
  }, []);

  if (!authStatus) {
    return <h1>Loading...</h1>
  }

  return (
    // will throw an error here (store hasn't been updated)
    <h1>{store.nested.value}</h1>
  );
}

I’m guessing maybe it’s because the async nature of the state update function but not sure if I missed something here or it’s a bug.

Have fun in React Conf! I’m so excited that we’re finally SHIPPING things! 👍

[aweary]

Yeah, if you want to compare it to class components the equivalent would be doing

render() {
  // Every time the component re-renders, store gets reset
  this.store = {};

[arianon]

The thing is, a function component’s body is executed every render, while componentDidMount is only executed on mount, so yes, I’d say this is definitely expected behaviour.

It’s not a breaking change because you can still use class components with componentDidMount just fine.