title: Can i set state in parent from child using useEffect hook in react
body: <p>I have a set of buttons in a child component where when clicked set a corresponding state value true or false. I have a useEffect hook in this child component also with dependencies on all these state values so if a button is clicked, this hook then calls setFilter which is passed down as a prop from the parent...</p>
  
  <pre><code>const Filter = ({ setFilter }) =&gt; {
  
    const [cycling, setCycling] = useState(true);
    const [diy, setDiy] = useState(true);
  
    useEffect(() =&gt; {
      setFilter({
        cycling: cycling,
        diy: diy
      });
    }, [cycling, diy]);
  
    return (
      &lt;Fragment&gt;
        &lt;Row&gt;
          &lt;Col&gt;
            &lt;Button block onClick={() =&gt; setCycling(!cycling)}&gt;cycling&lt;/Button&gt;
          &lt;/Col&gt;
          &lt;Col&gt;
            &lt;Button block onClick={() =&gt; setdIY(!DIY)}&gt;DIY&lt;/Button&gt;
          &lt;/Col&gt;
        &lt;/Row&gt;
      &lt;/Fragment&gt;
    );
  };
  </code></pre>
  
  <p>In the parent component I display a list of items. I have two effects in the parent, one which does an initial load of items and then one which fires whenever the filter is changed. I have removed most of the code for brevity but I think the ussue I am having boils down to the fact that on render of my ItemDashboard the filter is being called twice. How can I stop this happening or is there another way I should be looking at this.</p>
  
  <pre><code>const ItemDashboard = () =&gt; {
  
    const [filter, setFilter] = useState(null);
  
    useEffect(() =&gt; {
      console.log('on mount');
    }, []);
  
    useEffect(() =&gt; {
      console.log('filter');
    }, [filter]);
  
    return (
      &lt;Container&gt;..
        &lt;Filter setFilter={setFilter} /&gt;
      &lt;/Container&gt;
    );
  }
  </code></pre>