React hooks + old way components = cached state value (😱😱😱)

Please see this demo. As you can see, I have an old way component looks like this

import React, { Component } from "react";

class OldLibrary extends Component {
  componentDidMount() {
    setInterval(this.props.onProgress, 50);
  }
  render() {
    return null;
  }
}
export default OldLibrary;

A simple component setting interval when mount.

Now I have a component use React Hooks

function App() {
  const [value, setValue] = useState(0);
  const onProgress = () => {
    console.log(value);
    // this will always console logging 0 no matter what
  };
  const onClick = () => {
    setValue(value + 1);
    // Click me and state changes, but onProgress won't notice
  };
  return (
    <>
      <OldLibrary onProgress={onProgress} />
      <button onClick={onClick}>Click</button>
    </>
  );
}

This code above, no matter how I click the button, onProgress will always console logging initial value(which is 0), it’s just like the state is being cached or something I don’t know.

useRef won’t help too.

function App() {
  const [value, setValue] = useState(0);
  const onProgress = useRef(() => {
    console.log(value);
  });
  const onClick = () => {
    setValue(value + 1);
  };
  return (
    <>
      <OldLibrary onProgress={onProgress.current} />
      <button onClick={onClick}>Click</button>
    </>
  );
}

But if we use the old way, it will work just fine.

class App extends Component {
  state = {
    value: 0
  };
  onClick = () => {
    this.setState({ value: this.state.value + 1 });
  };
  onProgress = () => {
    console.log(this.state.value);
    // I will console logging different value when state changes
  };
  render() {
    return (
      <>
        <OldLibrary onProgress={this.onProgress} />
        <button onClick={this.onClick}>Click</button>
      </>
    );
  }
}

Thank you for listening my question. Please help, I can’t live without hooks 😭😭😭

[sophiebits]

@wojtekmaj’s explanation is correct – the onProgress prop gets updated to a new function but it is the old function that was passed to setInterval. In your class component example, onProgress always reads the latest this.state which is a mutable field.

If you aren’t able to change OldLibrary, your best approach is to store the value in a ref as described in our FAQ: https://reactjs.org/docs/hooks-faq.html#how-to-read-an-often-changing-value-from-usecallback.

function App() {
  const [value, setValue] = useState(0);
  const onClick = () => {
    setValue(value + 1);
  };

  const valueRef = useRef();
  useEffect(() => {
    valueRef.current = value;
  });
  const onProgress = () => {
    console.log(valueRef.current);
  };

  return (
    <>
      <OldLibrary onProgress={onProgress} />
      <button onClick={onClick}>Click</button>
    </>
  );
}

Note that this is one of the “sharp edges” of Hooks right now and we might introduce a better way to deal with this before the final release.

[wojtekmaj]

With the first render of App, you created onProgress function that returns value (0). You are then invoking onProgress function and it returns 0.

You then increment the value of value, so that it’s now 1. Within App, now there is value with value of 1, and a new onProgress function which would return 1 if called.

You continue to call the FIRST onProgress function in setInterval, but you ignore the fact that now OldLibrary have a SECOND onProgress function passed by props, which returns incremented value of value.

What you can do is wrap your setInterval so it would not call the first given this.props.onProgress directly, but an internal method which gets the newest onProgress function from props and calls it.

import React, { Component } from "react";

class OldLibrary extends Component {
  onProgress = () => {
    this.props.onProgress();
  }

  componentDidMount() {
    setInterval(this.onProgress, 500);
  }
  render() {
    return null;
  }
}
export default OldLibrary;