title: React: Setting and updating based on props
body: <p>Currently I am facing the problem that I want to change a state of a child component in React as soon as a prop is initialized or changed with a certain value. If I solve this with a simple if-query, then of course I get an infinite loop, since the components are then rendered over and over again.</p>
  <p><strong>Component (parent):</strong></p>
  <pre><code>function App() {
      const [activeSlide, setActiveSlide] = useState(0);
  
      function changeSlide(index) {
          setActiveSlide(index);
      }
  
      return (
          &lt;div className=&quot;app&quot;&gt;
              &lt;div className=&quot;app__nav&quot;&gt;
                  &lt;Button icon=&quot;FiSun&quot; handler={changeSlide} active={activeSlide} index=&quot;0&quot; /&gt;
                  &lt;Button icon=&quot;FiSettings&quot; handler={changeSlide} active={activeSlide} index=&quot;1&quot; /&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      );
  }
  </code></pre>
  <p><strong>Component (child):</strong></p>
  <pre><code>function Button(props) {
      const Icon = Icons[props.icon];
      const [activeClass, setActiveClass] = useState(&quot;&quot;);
  
      // This attempts an endless loop
      if(props.active == props.index) {
          setActiveClass(&quot;active&quot;);
      }
  
      function toggleView(e) {
          e.preventDefault();
          props.handler(props.index);
      }
  
      return(
          &lt;button className={activeClass} data-index={props.index} onClick={toggleView}&gt;
              &lt;Icon /&gt;
          &lt;/button&gt;
      )
  }
  </code></pre>
  <p>Is there a sensible and simple approach here? My idea would be to write the if-query into the return() and thus generate two different outputs, even though I would actually like to avoid this</p>