React hook equivalent to callback function after setting state [duplicate]

Question

In react (before hooks) when we set state we could call a function after state had been set as such:

this.setState({}, () => {//Callback}) 

What is the equivalent of this with hooks?

I tried doing this

const [currentRange, setCurrentRange] = useState("24h");  setCurrentRange(someRange, () => console.log('hi'))   

But this did not work

Anyone know a solution for this?

Answer 1

The useEffect hook can be used to invoke a function when some state change. If you pass it currentRange in an array as second argument, the function will only be invoked when currentRange change.

You can also create your own custom hook that uses the useRef hook to keep track of if it's the first time the effect is being run, so that you can skip the first invocation.

Example

const { useRef, useState, useEffect } = React;  function useEffectSkipFirst(fn, arr) {   const isFirst = useRef(true);    useEffect(() => {     if (isFirst.current) {       isFirst.current = false;       return;     }      return fn();   }, arr); }  function App() {   const [currentRange, setCurrentRange] = useState("24h");    useEffectSkipFirst(     () => {       console.log("hi");     },     [currentRange]   );    return (     <button       onClick={() => setCurrentRange(Math.floor(Math.random() * 24) + 1 + "h")}     >       Change range ({currentRange})     </button>   ); }  ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://unpkg.com/react@16/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>  <div id="root"></div>