When to use React componentDidUpdate method

Question

I wrote dozens of React files  never use componentDidUpdate method   Is there any typical example of when need to use this method   I want some real-world example  not a simple demo   Thanks for the answer

User · Answer

componentDidUpdate prevProps         if  this state authToken  null amp  amp prevProps authToken  null          AccountKit getCurrentAccessToken          then token   gt            if  token              AccountKit getCurrentAccount   then account   gt                this setState                 authToken  token                loggedAccount  account                                         else             console log  No user account logged                              catch e   gt  console log  Failed to get current access token   e

User · Answer

A simple example would be an app that collects input data from the user and then uses Ajax to upload said data to a database  Here s a simplified example  haven t run it - may have syntax errors   export default class Task extends React Component        constructor props  context        super props  context       this state           name   quot  quot         age   quot  quot         country   quot  quot                componentDidUpdate         this  commitAutoSave            changeName    e    gt        this setState  name  e target value            changeAge    e    gt        this setState  age  e target value            changeCountry    e    gt        this setState  country  e target value            commitAutoSave        gt        Ajax postJSON   someAPI json autosave           name  this state name        age  this state age        country  this state country                render         let  name  age  country    this state      return          lt form gt           lt input type  quot text quot  value  name  onChange  this  changeName    gt           lt input type  quot text quot  value  age  onChange  this  changeAge    gt           lt input type  quot text quot  value  country  onChange  this  changeCountry    gt         lt  form gt                So whenever the component has a state change it will autosave the data  There are other ways to implement it too  The componentDidUpdate is particularly useful when an operation needs to happen after the DOM is updated and the update queue is emptied  It s probably most useful on complex renders and state or DOM changes or when you need something to be the absolutely last thing to be executed  The example above is rather simple though  but probably proves the point  An improvement could be to limit the amount of times the autosave can execute  e g max every 10 seconds  because right now it will run on every key-stroke  I made a demo on this fiddle as well to demonstrate   For more info  refer to the official docs   componentDidUpdate   is invoked immediately after updating occurs  This method is not called for the initial render  Use this as an opportunity to operate on the DOM when the component has been updated  This is also a good place to do network requests as long as you compare the current props to previous props  e g  a network request may not be necessary if the props have not changed

User · Answer

Sometimes you might add a state value from props in constructor or componentDidMount  you might need to call setState when the props changed but the component has already mounted so componentDidMount will not execute and neither will constructor  in this particular case  you can use componentDidUpdate since the props have changed  you can call setState in componentDidUpdate with new props

User · Answer

When something in the state has changed and you need to call a side effect  like a request to api - get  put  post  delete   So you need to call componentDidUpdate   because componentDidMount   is already called   After calling side effect in componentDidUpdate    you can set the state to new value based on the response data in the then  response    gt  this setState  newValue   here       Please make sure that you need to check prevProps or prevState to avoid infinite loop because when setting state to a new value  the componentDidUpdate   will call again   There are 2 places to call a side effect for best practice - componentDidMount   and componentDidUpdate

User · Answer

I have used componentDidUpdate   in highchart   Here is a simple example of this component   import React    PropTypes  Component   from  react   window Highcharts   require  highcharts     export default class Chartline extends React Component     constructor props        super props       this state           chart                   public componentDidUpdate            console log this props candidate   this props candidate       if  this props category          const category   this props category   this props category             console log  category   category         window Highcharts chart  jobcontainer     category  id            title              text                        plotOptions              series                cursor   pointer                                 chart              defaultSeriesType   spline                     xAxis                 categories  candidate dateArr            categories    Day1    Day2    Day3    Day4    Day5    Day6    Day7              showEmpty  true                    labels              style                color   white               fontSize   25px               fontFamily   SF UI Text                                 series                            name   Low               color    9B260A               data  category lowcount                                      name   High               color    0E5AAB               data  category highcount                                      name   Average               color    12B499               data  category averagecount                                             public render         const category   this props category   this props category           console log  render category   category       return  lt div id   jobcontainer     category  id  style    maxWidth   400px   height   180px       gt

User · Answer

This lifecycle method is invoked as soon as the updating happens  The most common use case for the componentDidUpdate   method is updating the DOM in response to prop or state changes   You can call setState   in this lifecycle  but keep in mind that you will need to wrap it in a condition to check for state or prop changes from previous state  Incorrect usage of setState   can lead to an infinite loop  Take a look at the example below that shows a typical usage example of this lifecycle method   componentDidUpdate prevProps       Typical usage  don t forget to compare the props  if  this props userName     prevProps userName       this fetchData this props userName          Notice in the above example that we are comparing the current props to the previous props  This is to check if there has been a change in props from what it currently is  In this case  there won   t be a need to make the API call if the props did not change   For more info  refer to the  official docs

[reactjs] When to use React "componentDidUpdate" method?

Examples related to reactjs