Can I set state inside a useEffect hook

Question

Lets say I have some state that is dependent on some other state  eg when A changes I want B to change     Is it appropriate to create a hook that observes A and sets B inside the useEffect hook    Will the effects cascade such that  when I click the button  the first effect will fire  causing b to change  causing the second effect to fire  before the next render  Are there any performance downsides to structuring code like this   let MyComponent   props   gt      let  a  setA    useState 1    let  b  setB    useState 2    useEffect           gt          if    some stuff is true              setB 3                      a         useEffect           gt             do some stuff             b          return        lt button       onClick       gt            setA 5                gt        click me      lt  button gt

User · Answer

Generally speaking  using setState inside useEffect will create an infinite loop that most likely you don t want to cause  There are a couple of exceptions to that rule which I will get into later   useEffect is called after each render and when setState is used inside of it  it will cause the component to re-render which will call useEffect and so on and so on   One of the popular cases that using useState inside of useEffect will not cause an infinite loop is when you pass an empty array as a second argument to useEffect like useEffect      gt              which means that the effect function should be called once  after the first mount render only  This is used widely when you re doing data fetching in a component and you want to save the request data in the component s state

User · Answer

Effects are always executed after the render phase is completed even if you setState inside the one effect  another effect will read the updated state and take action on it only after the render phase    Having said that its probably better to take both actions in the same effect unless there is a possibility that b can change due to reasons other than changing a in which case too you would want to execute the same logic

User · Answer

useEffect can hook on a certain prop or state  so  the thing you need to do to avoid infinite loop hook is binding some variable or state to effect For Example  useEffect myeffectCallback       above effect will fire only once the component has rendered  this is similar to componentDidMount lifecycle const  something  setSomething    withState 0  const  myState  setMyState    withState 0  useEffect      gt      setSomething 0     myState   above effect will fire only my state has changed this is similar to componentDidUpdate except not every changing state will fire it  You can read more detail though this link

User · Answer

1  Can I set state inside a useEffect hook   In principle  you can set state freely where you need it - including inside useEffect and even during rendering  Just make sure to avoid infinite loops by settting Hook deps properly and or state conditionally       2  Lets say I have some state that is dependent on some other state  Is it appropriate to create a hook that observes A and sets B inside the useEffect hook    You just described the classic use case for useReducer      useReducer is usually preferable to useState when you have complex state logic that involves multiple sub-values or when the next state depends on the previous one   React docs       When setting a state variable depends on the current value of another state variable  you might want to try replacing them both with useReducer          When you find yourself writing setSomething something   gt        it   s a good time to consider using a reducer instead   Dan Abramov  Overreacted blog     x000D   x000D  let MyComponent        gt    x000D    let  state  dispatch    useReducer reducer    a  1  b  2     x000D   x000D    useEffect      gt    x000D      console log  Some effect with B    x000D        state b    x000D   x000D    return   x000D       lt div gt  x000D         lt p gt A   state a   B   state b  lt  p gt  x000D         lt button onClick       gt  dispatch   type   SET A   payload  5     gt  x000D          Set A to 5 and Check B x000D         lt  button gt  x000D         lt button onClick       gt  dispatch   type   INCREMENT B      gt  x000D          Increment B x000D         lt  button gt  x000D       lt  div gt  x000D       x000D     x000D   x000D     B depends on A  If B  gt   A  then reset B to 1  x000D  function reducer state    type  payload      x000D    const someCondition   state b  gt   state a  x000D   x000D    if  type      SET A   x000D      return someCondition     a  payload  b  1          state  a  payload    x000D    else if  type      INCREMENT B   return      state  b  state b   1    x000D    return state  x000D    x000D   x000D  ReactDOM render  lt MyComponent   gt   document getElementById  root     x000D   lt script src  https   cdnjs cloudflare com ajax libs react 16 13 0 umd react production min js  integrity  sha256-32Gmw5rBDXyMjg 73FgpukoTZdMrxuYW7tj8adbN8z4   crossorigin  anonymous  gt  lt  script gt  x000D   lt 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  gt  lt  script gt  x000D   lt div id  root  gt  lt  div gt  x000D   lt script gt var   useReducer  useEffect     React lt  script gt  x000D   x000D   x000D        3  Will the effects cascade such that  when I click the button  the first effect will fire  causing b to change  causing the second effect to fire  before the next render   useEffect always runs after the render is committed and DOM changes are applied  The first effect fires  changes b and causes a re-render  After this render has completed  second effect will run due to b changes    x000D   x000D  let MyComponent   props   gt    x000D    console log  render    x000D    let  a  setA    useState 1   x000D    let  b  setB    useState 2   x000D   x000D    let isFirstRender   useRef true   x000D   x000D    useEffect      gt    x000D      console log  useEffect a  value    a   x000D      if  isFirstRender current  isFirstRender current   false  x000D      else setB 3   x000D      return      gt    x000D        console log  unmount useEffect a  value    a   x000D         x000D        a    x000D    useEffect      gt    x000D      console log  useEffect b  value    b   x000D      return      gt    x000D        console log  unmount useEffect b  value    b   x000D         x000D        b    x000D   x000D    return   x000D       lt div gt  x000D         lt p gt a   a   b   b  lt  p gt  x000D         lt button x000D          onClick       gt    x000D            console log  Clicked     x000D            setA 5   x000D             x000D         gt  x000D          click me x000D         lt  button gt  x000D       lt  div gt  x000D       x000D     x000D   x000D  ReactDOM render  lt MyComponent   gt   document getElementById  root     x000D   lt script src  https   cdnjs cloudflare com ajax libs react 16 13 0 umd react production min js  integrity  sha256-32Gmw5rBDXyMjg 73FgpukoTZdMrxuYW7tj8adbN8z4   crossorigin  anonymous  gt  lt  script gt  x000D   lt 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  gt  lt  script gt  x000D   lt div id  root  gt  lt  div gt  x000D   lt script gt var   useReducer  useEffect  useState  useRef     React lt  script gt  x000D   x000D   x000D        4  Are there any performance downsides to structuring code like this   Yes  By wrapping the state change of b in a separate useEffect for a  the browser has an additional layout paint phase - these effects are potentially visible for the user  If there is no way you want give useReducer a try  you could change b state together with a directly    x000D   x000D  let MyComponent        gt    x000D    console log  render    x000D    let  a  setA    useState 1   x000D    let  b  setB    useState 2   x000D   x000D    useEffect      gt    x000D      console log  useEffect b  value    b   x000D      return      gt    x000D        console log  unmount useEffect b  value    b   x000D         x000D        b    x000D   x000D    const handleClick        gt    x000D      console log  Clicked     x000D      setA 5   x000D      b  gt   5   setB 1    setB b   1   x000D       x000D   x000D    return   x000D       lt div gt  x000D         lt p gt  x000D          a   a   b   b  x000D         lt  p gt  x000D         lt button onClick  handleClick  gt click me lt  button gt  x000D       lt  div gt  x000D       x000D     x000D   x000D  ReactDOM render  lt MyComponent   gt   document getElementById  root     x000D   lt script src  https   cdnjs cloudflare com ajax libs react 16 13 0 umd react production min js  integrity  sha256-32Gmw5rBDXyMjg 73FgpukoTZdMrxuYW7tj8adbN8z4   crossorigin  anonymous  gt  lt  script gt  x000D   lt 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  gt  lt  script gt  x000D   lt div id  root  gt  lt  div gt  x000D   lt script gt var   useReducer  useEffect  useState  useRef     React lt  script gt  x000D   x000D   x000D

User · Answer

For future purposes  this may help too  It s ok to use setState in useEffect you just need to have attention as described already to not create a loop  But it s not the only problem that may occur  See below  Imagine that you have a component Comp that receives props from parent and according to a props change you want to set Comp s state  For some reason  you need to change for each prop in a different useEffect  DO NOT DO THIS useEffect      gt      setState      state  a  props a         props a     useEffect      gt      setState      state  b  props b         props b     It may never change the state of a as you can see in this example  https   codesandbox io s confident-lederberg-dtx7w The reason why this happen in this example it s because both useEffects run in the same react cycle when you change both prop a and prop b so the value of     state  when you do setState are exactly the same in both useEffect because they are in the same context  When you run the second setState it will replace the first setState  DO THIS INSTEAD The solution for this problem is basically call setState like this  useEffect      gt      setState state   gt        state  a  props a          props a     useEffect      gt      setState state   gt        state  b  props b          props b     Check the solution here  https   codesandbox io s mutable-surf-nynlx Now  you always receive the most updated and correct value of the state when you proceed with the setState  I hope this helps someone

[javascript] Can I set state inside a useEffect hook

Examples related to javascript

Examples related to reactjs

Examples related to react-hooks