title: Should I wrap every prop with useCallback or useMemo, when to use this hooks?
body: <p>With react hooks now available should I in case of functional components wrap every function passed with props with <a href="https://reactjs.org/docs/hooks-reference.html#usecallback" rel="noreferrer">useCallback</a> and every other props value with <a href="https://reactjs.org/docs/hooks-reference.html#usememo" rel="noreferrer">useMemo</a>?</p>
  
  <p>Also having custom function inside my component dependent on any props value should I wrap it with <a href="https://reactjs.org/docs/hooks-reference.html#usecallback" rel="noreferrer">useCallback</a>?</p>
  
  <p>What are good practices to decide which props or const values from component wrap with this hooks ?</p>
  
  <p><strong>If this improves performance why not to do it at all times ?</strong></p>
  
  <p>Lets consider custom button where we wrap click handler and add custom logic</p>
  
  <pre><code>function ExampleCustomButton({ onClick }) {
    const handleClick = useCallback(
      (event) =&gt; {
        if (typeof onClick === 'function') {
          onClick(event);
        }
  
        // do custom stuff
  
      },
      [onClick]
    );
  
    return &lt;Button onClick={handleClick} /&gt;;
  }
  </code></pre>
  
  <p>Lets consider custom button where we wrap click handler and add custom logic on condition</p>
  
  <pre><code>function ExampleCustomButton({ someBool }) {
    const handleClick = useCallback(
      (event) =&gt; {
        if (someBool) {
          // do custom stuff
        }
      },
      [someBool]
    );
  
    return &lt;Button onClick={handleClick} /&gt;;
  }
  </code></pre>
  
  <p>Should i in this two cases wrap my handler with <a href="https://reactjs.org/docs/hooks-reference.html#usecallback" rel="noreferrer">useCallback</a> ?</p>
  
  <p>Similar case with use memo.</p>
  
  <pre><code>function ExampleCustomButton({ someBool }) {
    const memoizedSomeBool = useMemo(() =&gt; someBool, [someBool])
    const handleClick = useCallback(
      (event) =&gt; {
        if (memoizedSomeBool) {
          // do custom stuff
        }
      },
      [memoizedSomeBool]
    );
  
    return &lt;Button onClick={handleClick} /&gt;;
  }
  </code></pre>
  
  <p>In this example I even pass memoized value to <a href="https://reactjs.org/docs/hooks-reference.html#usecallback" rel="noreferrer">useCallback</a>. </p>
  
  <p>Another case what if in the component tree many components memoize same value ? How does this impact performance ?</p>