setState inside of componentDidUpdate

Question

I m writing a script which moves dropdown below or above input depending on height of dropdown and position of the input on the screen  Also I want to set modifier to dropdown according to its direction  But using setState inside of the componentDidUpdate creates an infinite loop which is obvious   I ve found a solution in using getDOMNode and setting classname to dropdown directly  but i feel that there should be a better solution using React tools  Can anybody help me   Here is a part of working code with getDOMNode  i  a little bit neglected positioning logic to simplify code   let SearchDropdown   React createClass       componentDidUpdate params            let el   this getDOMNode            el classList remove  dropDown-top            if needToMoveOnTop el                 el top   newTopValue              el right   newRightValue              el classList add  dropDown-top                         render             let dataFeed   this props dataFeed          return                lt DropDown  gt                   dataFeed map  data  i    gt                        return   lt DropDownRow key  response symbol  data  data   gt                                     lt  DropDown gt                         and here is code with setstate  which creates an infinite loop   let SearchDropdown   React createClass       getInitialState             return               top  false                       componentDidUpdate params            let el   this getDOMNode            if  this state top               this setState  top  false                      if needToMoveOnTop el                 el top   newTopValue              el right   newRightValue              if   this state top                  this setState  top  true                                      render             let dataFeed   this props dataFeed          let class   cx   dropDown-top    this state top            return                lt DropDown className  class   gt                   dataFeed map  data  i    gt                        return   lt DropDownRow key  response symbol  data  data   gt                                     lt  DropDown gt

User · Accepted Answer

You can use setStateinside componentDidUpdate  The problem is that somehow you are creating an infinite loop because there s no break condition   Based on the fact that you need values that are provided by the browser once the component is rendered  I think your approach about using componentDidUpdate is correct  it just needs better handling of the condition that triggers the setState

User · Answer

The componentDidUpdate signature is void  componentDidUpdate previousProps  previousState   With this you will be able to test which props state are dirty and call setState accordingly   Example   componentDidUpdate previousProps  previousState        if  previousProps data     this props data            this setState

User · Answer

I had a similar problem where i have to center the toolTip  React setState in componentDidUpdate did put me in infinite loop  i tried condition it worked  But i found using in ref callback gave me simpler and clean solution  if you use inline function for ref callback you will face the  null problem for every component update  So use function reference in ref callback and set the state there  which will initiate the re-render

User · Answer

If you use setState inside componentDidUpdate it updates the component  resulting in a call to componentDidUpdate which subsequently calls setState again resulting in the infinite loop  You should conditionally call setState and ensure that the condition violating the call occurs eventually e g   componentDidUpdate  function         if  condition            this setState             else             do something else           In case you are only updating the component by sending props to it it is not being updated by setState  except for the case inside componentDidUpdate   you can call setState inside componentWillReceiveProps instead of componentDidUpdate

User · Answer

This example will help you to understand the React Life Cycle Hooks   You can setState in getDerivedStateFromProps method i e  static and trigger the method after props change in componentDidUpdate   In componentDidUpdate you will get 3rd param which returns from getSnapshotBeforeUpdate   You can check this codesandbox link   x000D   x000D     Child component x000D  class Child extends React Component   x000D       First thing called when component loaded x000D    constructor props    x000D      console log  constructor    x000D      super props   x000D      this state     x000D        value  this props value  x000D        color   green  x000D         x000D      x000D   x000D       static method x000D       dont have access of  this  x000D       return object will update the state x000D    static getDerivedStateFromProps props  state    x000D      console log  getDerivedStateFromProps    x000D      return   x000D        value  props value  x000D        color  props value   2     0    green     red  x000D         x000D      x000D   x000D       skip render if return false x000D    shouldComponentUpdate nextProps  nextState    x000D      console log  shouldComponentUpdate    x000D         return nextState color     this state color  x000D      return true  x000D      x000D   x000D       In between before real DOM updates  pre-commit  x000D       has access of  this  x000D       return object will be captured in componentDidUpdate x000D    getSnapshotBeforeUpdate prevProps  prevState    x000D      console log  getSnapshotBeforeUpdate    x000D      return   oldValue  prevState value    x000D      x000D   x000D       Calls after component updated x000D       has access of previous state and props with snapshot x000D       Can call methods here x000D       setState inside this will cause infinite loop x000D    componentDidUpdate prevProps  prevState  snapshot    x000D      console log  componentDidUpdate     prevProps  prevState  snapshot   x000D      x000D   x000D    static getDerivedStateFromError error    x000D      console log  getDerivedStateFromError    x000D      return   hasError  true    x000D      x000D   x000D    componentDidCatch error  info    x000D      console log  componentDidCatch     error  info   x000D      x000D   x000D       After component mount x000D       Good place to start AJAX call and initial state x000D    componentDidMount     x000D      console log  componentDidMount    x000D      this makeAjaxCall    x000D      x000D   x000D    makeAjaxCall     x000D      console log  makeAjaxCall    x000D      x000D   x000D    onClick     x000D      console log  state     this state   x000D      x000D   x000D    render     x000D      return   x000D         lt div style    border   1px solid red   padding   0px 10px 10px 10px     gt  x000D           lt p style    color  this state color    gt Color   this state color  lt  p gt  x000D           lt button onClick       gt  this onClick    gt  this props value  lt  button gt  x000D         lt  div gt  x000D         x000D      x000D    x000D   x000D     Parent component x000D  class Parent extends React Component   x000D    constructor props    x000D      super props   x000D      this state     value  1    x000D   x000D      this tick        gt    x000D        this setState   x000D          date  new Date    x000D          value  this state value   1 x000D            x000D         x000D      x000D   x000D    componentDidMount     x000D      setTimeout this tick  2000   x000D      x000D   x000D    render     x000D      return   x000D         lt div style    border   1px solid blue   padding   0px 10px 10px 10px     gt  x000D           lt p gt Parent lt  p gt  x000D           lt Child value  this state value    gt  x000D         lt  div gt  x000D         x000D      x000D    x000D   x000D  function App     x000D    return   x000D       lt React Fragment gt  x000D         lt Parent   gt  x000D       lt  React Fragment gt  x000D       x000D    x000D   x000D  const rootElement   document getElementById  root    x000D  ReactDOM render  lt App   gt   rootElement   x000D   lt div id  root  gt  lt  div gt  x000D   lt script src  https   cdnjs cloudflare com ajax libs react 16 6 3 umd react production min js  gt  lt  script gt  x000D   lt script src  https   cdnjs cloudflare com ajax libs react-dom 16 6 3 umd react-dom production min js  gt  lt  script gt  x000D   x000D   x000D

User · Answer

I would say that you need to check if the state already has the same value you are trying to set  If it s the same  there is no point to set state again for the same value   Make sure to set your state like this   let top   newValue   true or false   if top     this state top       this setState  top

User · Answer

You can use setState inside componentDidUpdate

User · Answer

this setState creates an infinite loop when used in ComponentDidUpdate when there is no break condition in the loop  You can use redux to set a variable true in the if statement and then in the condition set the variable false then it will work  Something like this  if this props route params resetFields            this props route params resetFields   false          this setState  broadcastMembersCount  0 isLinkAttached  false attachedAffiliatedLink false affilatedText   add your affiliate link             this resetSelectedContactAndGroups            this hideNext   false          this initialValue 1   140          this initialValue 2   140          this height   20

[javascript] setState() inside of componentDidUpdate()

Examples related to javascript

Examples related to reactjs

Examples related to ecmascript-6