How to use callback with useState hook in react [duplicate]

Question

I am using functional component with hooks. I need to update state in parent from a child. I am using a prop function in Parent. All works fine except my prop function is getting the previous state and not the current state. My prop function gets executed before useState hook setting current state. How can I can I wait for my call back function to be executed after useState call. I am looking for something like setState(state,callback) from class based components.

Here is the code snippet:

function Parent() {
  const [Name, setName] = useState("");
  getChildChange = getChildChange.bind(this);
  function getChildChange(value) {
    setName(value);
  }

  return <div> {Name} :
    <Child getChildChange={getChildChange} ></Child>
  </div>
}

function Child(props) {
  const [Name, setName] = useState("");
  handleChange = handleChange.bind(this);

  function handleChange(ele) {
    setName(ele.target.value);
    props.getChildChange(collectState());
  }

  function collectState() {
    return Name;
  }

  return (<div>
    <input onChange={handleChange} value={Name}></input>
  </div>);
}

why don't you just pass down setName and call it from the child? — dan-klasson
– dan-klasson, Commented Mar 2, 2019 at 3:41
I hope we get interesting comments in this thread github.com/facebook/react/issues/17969 — RajaSekhar K
– RajaSekhar K, Commented Apr 19, 2020 at 3:40
There's an easy way to do this without useEffect stackoverflow.com/a/70405577/5823517 — Tunn
– Tunn, Commented Dec 18, 2021 at 17:37
Most answers are putting too much emphasis on making this behave like a class based component. That is a red herring. The real problem is that the child is calling getChildChange with the old value. Changing it to props.getChildChange(ele.target.value) would solve it. See stackoverflow.com/a/56267744/367796 — steinybot
– steinybot, Commented Jun 26, 2022 at 20:47

Robin Wieruch · Accepted Answer · 2022-04-14 15:23:43Z

179

You can use useEffect/useLayoutEffect to achieve this:

const SomeComponent = () => {
  const [count, setCount] = React.useState(0)

  React.useEffect(() => {
    if (count > 1) {
      document.title = 'Threshold of over 1 reached.';
    } else {
      document.title = 'No threshold reached.';
    }
  }, [count]);

  return (
    <div>
      <p>{count}</p>

      <button type="button" onClick={() => setCount(count + 1)}>
        Increase
      </button>
    </div>
  );
};

If you want to prevent the callback from running on first render, adjust the previous version:

const SomeComponent = () => {
  const [count, setCount] = React.useState(0)

  const didMount = React.useRef(false);

  React.useEffect(() => {
    if (!didMount.current) {
      didMount.current = true;
      return;
    }

    if (count > 1) {
      document.title = 'Threshold of over 1 reached.';
    } else {
      document.title = 'No threshold reached.';
    }
  }, [count]);

  return (
    <div>
      <p>{count}</p>

      <button type="button" onClick={() => setCount(count + 1)}>
        Increase
      </button>
    </div>
  );
};

More about it over here.

edited Apr 14, 2022 at 15:23

answered May 31, 2019 at 11:22

Robin Wieruch

16.1k11 gold badges90 silver badges111 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

zyrup Over a year ago

this works great with integers, but arrays and objects in useState seem to cause infinite refreshes

flogram_dev · Accepted Answer · 2022-07-15 13:45:20Z

157

`setState(updater, callback)` for `useState`

Following implementation comes really close to the original setState callback of classes.

Improvements made to accepted answer:

Callback execution is omitted on initial render - we only want to call it on state updates
Callback can be dynamic for each setState invocation, like with classes

Usage

const App = () => {
  const [state, setState] = useStateCallback(0); // same API as useState

  const handleClick = () => {
    setState(
      prev => prev + 1,
      // second argument is callback, `s` being the *updated* state
      s => console.log("I am called after setState, state:", s)
    );
  };

  return <button onClick={handleClick}>Increment</button>;
}

`useStateCallback`

function useStateCallback(initialState) {
  const [state, setState] = useState(initialState);
  const cbRef = useRef(null); // init mutable ref container for callbacks

  const setStateCallback = useCallback((state, cb) => {
    cbRef.current = cb; // store current, passed callback in ref
    setState(state);
  }, []); // keep object reference stable, exactly like `useState`

  useEffect(() => {
    // cb.current is `null` on initial render, 
    // so we only invoke callback on state *updates*
    if (cbRef.current) {
      cbRef.current(state);
      cbRef.current = null; // reset callback after execution
    }
  }, [state]);

  return [state, setStateCallback];
}

TypeScript version

function useStateCallback<T>(
  initialState: T
): [T, (state: T, cb?: (state: T) => void) => void] {
  const [state, setState] = useState(initialState);
  const cbRef = useRef<((state: T) => void) | undefined>(undefined); // init mutable ref container for callbacks

  const setStateCallback = useCallback((state: T, cb?: (state: T) => void) => {
    cbRef.current = cb; // store current, passed callback in ref
    setState(state);
  }, []); // keep object reference stable, exactly like `useState`

  useEffect(() => {
    // cb.current is `undefined` on initial render,
    // so we only invoke callback on state *updates*
    if (cbRef.current) {
      cbRef.current(state);
      cbRef.current = undefined; // reset callback after execution
    }
  }, [state]);

  return [state, setStateCallback];
}

Further info: React Hooks FAQ: Is there something like instance variables?

Working example

const App = () => {
  const [state, setState] = useStateCallback(0);

  const handleClick = () =>
    setState(
      prev => prev + 1,
      // important: use `s`, not the stale/old closure value `state`
      s => console.log("I am called after setState, state:", s)
    );

  return (
    <div>
      <p>Hello Comp. State: {state} </p>
      <button onClick={handleClick}>Click me</button>
    </div>
  );
}

function useStateCallback(initialState) {
  const [state, setState] = useState(initialState);
  const cbRef = useRef(null);

  const setStateCallback = useCallback((state, cb) => {
    cbRef.current = cb; 
    setState(state);
  }, []);

  useEffect(() => {
    if (cbRef.current) {
      cbRef.current(state);
      cbRef.current = null;
    }
  }, [state]);

  return [state, setStateCallback];
}

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.0/umd/react.production.min.js" integrity="sha256-32Gmw5rBDXyMjg/73FgpukoTZdMrxuYW7tj8adbN8z4=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.0/umd/react-dom.production.min.js" integrity="sha256-bjQ42ac3EN0GqK40pC9gGi/YixvKyZ24qMP/9HiGW7w=" crossorigin="anonymous"></script>
<script>var { useReducer, useEffect, useState, useRef, useCallback } = React</script>
<div id="root"></div>

edited Jul 15, 2022 at 13:45

flogram_dev

43k11 gold badges109 silver badges161 bronze badges

answered May 16, 2020 at 19:36

ford04

75.8k26 gold badges219 silver badges176 bronze badges

10 Comments

bot19 Over a year ago

what does cbRef.current(state); do in this code inside of the conditional in the useEffect?

ford04 Over a year ago

@bot19 this is the actual invocation of the callback, which has previously been set via setState(..,cb). cbRef.current stores a function. This function is then called - (state) - with the current, updated state.

ford04 Over a year ago

@dwjohnston bailing out of state updates in case of identical values is the new React default for Hooks - hence I wouldn't change this behavior in most cases. If you really need to be inline with old class-based comparison for legacy reasons (which behaves this way due to object merge), the codesandbox approach looks reasonable! Instead of using Symbol, you might as well wrap the state value in a new object container every time.

Petr Újezdský Over a year ago

codesandbox.io/s/gifted-dhawan-hedsp?file=/src/App.tsx - I have used the array and added current state option to the callback. There is also example with the double-update. Hope it helps somebody :)

ford04 Over a year ago

@PetrÚjezdský thanks for your ideas! Re 1: I guess, this comment fits well. Re 2: If you call setState twice during same render cycle and same hook instance, the last value wins in React. So I would expect same behavior when setting a callback and would rather be confused, if both old and new callback are invoked. Both that seems to be rather an edge case anyway - most probably you will have an event handler, where setting state is done in different renders

|

Abhijith Sasikumar · Accepted Answer · 2022-09-14 04:35:45Z

44

With React16.x and up, if you want to invoke a callback function on state change using useState hook, you can use the useEffect hook attached to the state change.

import React, { useEffect } from "react";

useEffect(() => {
  props.getChildChange(name); // using camelCase for functions is recommended.
}, [name]); // this will call getChildChange on initial render and when ever name changes.

edited Sep 14, 2022 at 4:35

answered Jul 9, 2019 at 3:16

Abhijith Sasikumar

15.3k4 gold badges34 silver badges46 bronze badges

3 Comments

Gucal Over a year ago

What should we do if there is more than one function and only one of them needs to work in the replay?

DAMIEN JIANG Over a year ago

@Gucal you can use useEffect multiple times like useEffect(() => loadFunctionAOnce()). useEffect(() => loadFunctionBIfNameChange(), [name])

0xAnon Over a year ago

This will also run the props.getChildChange on initial render

徐銘谷 · Accepted Answer · 2019-05-23 03:49:00Z

Actually, you should avoid using this when using react hooks. It causes side effects. That's why react team create react hooks.

If you remove codes that tries to bind this, you can just simply pass setName of Parent to Child and call it in handleChange. Cleaner code!

function Parent() {
  const [Name, setName] = useState("");

  return <div> {Name} :
    <Child setName={setName} ></Child>
  </div>
}

function Child(props) {
  const [Name, setName] = useState("");

  function handleChange(ele) {
    setName(ele.target.value);
    props.setName(ele.target.value);
  }

  return (<div>
    <input onChange={handleChange} value={Name}></input>
  </div>);
}

Moreover, you don't have to create two copies of Name(one in Parent and the other one in Child). Stick to "Single Source of Truth" principle, Child doesn't have to own the state Name but receive it from Parent. Cleanerer node!

function Parent() {
  const [Name, setName] = useState("");

  return <div> {Name} :
    <Child setName={setName} Name={Name}></Child>
  </div>
}

function Child(props) {    
  function handleChange(ele) {
    props.setName(ele.target.value);
  }

  return (<div>
    <input onChange={handleChange} value={props.Name}></input>
  </div>);
}

Sunil Kumar · Accepted Answer · 2019-11-14 11:48:05Z

10

we can write customise function which will call the callBack function if any changes in the state

import React, { useState, useEffect } from "react";
import ReactDOM from "react-dom";

import "./styles.css";

const useStateCallbackWrapper = (initilValue, callBack) => {
  const [state, setState] = useState(initilValue);
  useEffect(() => callBack(state), [state]);
  return [state, setState];
};

const callBack = state => {
  console.log("---------------", state);
};
function App() {
  const [count, setCount] = useStateCallbackWrapper(0, callBack);
  return (
    <div className="App">
      <h1>{count}</h1>
      <button onClick={() => setCount(count + 1)}>+</button>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

`

answered Nov 14, 2019 at 11:48

Sunil Kumar

4204 silver badges14 bronze badges

2 Comments

Pablo Albaladejo Over a year ago

This solution fails at production build with

React Hook useEffect has a missing dependency: 'callBack'. Either include it or remove the dependency array. If 'callBack' changes too often, find the parent component that defines it and wrap that definition in useCallback  react-hooks/exhaustive-deps

RajaSekhar K Over a year ago

try keeping the useEffect line like useEffect(() => callBack?callBack(state):null, [state, callBack]);

james h · Accepted Answer · 2020-04-29 10:44:46Z

7

Another way to achieve this:

const [Name, setName] = useState({val:"", callback: null});
React.useEffect(()=>{
  console.log(Name)
  const {callback} = Name;
  callback && callback();
}, [Name]);
setName({val:'foo', callback: ()=>setName({val: 'then bar'})})

answered Apr 29, 2020 at 10:44

james h

1251 silver badge5 bronze badges

1 Comment

Nick Chan Abdullah Over a year ago

this is kinda neat. so this way, the sequence of execution will depend on how you set the key values ? val first, then callback ?

dishwasherWithProgrammingSkill · Accepted Answer · 2020-05-04 03:04:45Z

4

you can utilize useCallback hook to do this.

function Parent() {
  const [name, setName] = useState("");
  const getChildChange = useCallback( (updatedName) => {
    setName(updatedName);
  }, []);

  return <div> {name} :
    <Child getChildChange={getChildChange} ></Child>
  </div>
}

function Child(props) {
  const [name, setName] = useState("");

  function handleChange(ele) {
    setName(ele.target.value);
    props.getChildChange(ele.target.value);
  }

  function collectState() {
    return name;
  }

  return (<div>
    <input onChange={handleChange} value={name}></input>
  </div>);
}

answered May 4, 2020 at 3:04

dishwasherWithProgrammingSkill

5417 silver badges23 bronze badges

3 Comments

Isaac Pak Over a year ago

Setting state in two components for the same variable doesn't sound like a good idea to me.

Hidayt Rahman Over a year ago

useState Hook doesn't support the second callback argument. To execute a side effect after rendering, declare it in the component body with useEffect()

. This is what i am getting after putting callback

tmohammad78 Over a year ago

Hey @dishwasherWithProgrammingSkill , whats usage of this code ? whats different to setState inline like this : <Child getChildChange={(value) => setValue(value)} ></Child>

Kirill · Accepted Answer · 2019-03-02 03:45:48Z

function Parent() {
  const [Name, setName] = useState("");
  getChildChange = getChildChange.bind(this);
  function getChildChange(value) {
    setName(value);
  }

  return <div> {Name} :
    <Child getChildChange={getChildChange} ></Child>
  </div>
}

function Child(props) {
  const [Name, setName] = useState("");
  handleChange = handleChange.bind(this);
  collectState = collectState.bind(this);
  
  function handleChange(ele) {
    setName(ele.target.value);
  }

  function collectState() {
    return Name;
  }
  
   useEffect(() => {
    props.getChildChange(collectState());
   });

  return (<div>
    <input onChange={handleChange} value={Name}></input>
  </div>);
}

useEffect act as componentDidMount, componentDidUpdate, so after updating state it will work

Collectives™ on Stack Overflow

How to use callback with useState hook in react [duplicate]

8 Answers 8

1 Comment

`setState(updater, callback)` for `useState`

Usage

`useStateCallback`

Working example

10 Comments

3 Comments

Comments

2 Comments

1 Comment

3 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

1 Comment

setState(updater, callback) for useState

Usage

useStateCallback

Working example

10 Comments

3 Comments

Comments

2 Comments

1 Comment

3 Comments

Comments

Linked

Related

`setState(updater, callback)` for `useState`

`useStateCallback`