title: What lifecycle hook i need to use? - react
body: <p>The situation is this: i have a database, where the data is. The data is structured with an array of objects. The objects have three properties (which are relevant now). These are: id, parentId, and status. The components build up with these properties, and the component clones itself recursively, so they are nested within each other. It looks like this:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>    
      
  class Task extends React.Component{
      constructor(props){
          super(props);
          this.state = {
              status: this.props.status
          }
      }
      
      //gets fired right after the state changed by removeTask
      static getDerivedStateFromProps(props){
          console.log("state from props")
          return{status: props.status}
      }
      
      componentDidUpdate(){
        console.log("update"); 
        this.checkDeleted()
      }
      
      checkDeleted = () =&gt; {
          if (this.state.status === 'deleted'){
              deleteTask(this.props.id) //a function which deletes from database
          }
      }
      
      tasks = () =&gt; {
          console.log("childs rendered")
          return this.props.tasks
          .filter(task =&gt; task.pId === this.props.id)
          .map(task =&gt; {
              return &lt;Task 
                  id={task.id} 
                  pId={task.pId}
                  status={this.state.status}
              /&gt;
          })
      }
      
      removeTask = () =&gt; {
          console.log("state changed")
          this.setState({status: 'deleted'})
      }
      
      render(){
        console.log("render")
        return(
          &lt;div
            &lt;button onClick={this.removeTask} /&gt;
            {this.tasks()}
          &lt;/div&gt;
        )
      }
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>What happens: the order of the logs are the next:</p>
  
  <ul>
  <li>state changed (removeTask())</li>
  <li>state from props (gDSFP())</li>
  <li>render</li>
  <li>childs rendered (tasks() fired inside render())</li>
  <li>update (componentDidUpdate())</li>
  </ul>
  
  <p>This isn't good, because when the state changed from removeTask(), it gets right back from the props with gDSFP, before the component can pass the changed state to it's childs. But i want to set the state from the props, because the childs need to get it. What could happen here is: the removeTask() fired, sets the new state, rerender, the childs get the new status as a prop, and when the update happens, deletes all the component, and it's child from the database. So what will be good:</p>
  
  <ul>
  <li>click happened, set new state</li>
  <li>render</li>
  <li>render childs, set they status prop to the state</li>
  <li>check if the status is "deleted"</li>
  <li>set state from props if it's changed, and rerender</li>
  </ul>
  
  <p>How to earn this?</p>