title: Prevent Child Rerendering if Parent is Rerendered Using Hooks
body: <p>My bestSellerDummy data doesn't change, so I'd like to prevent the same Product child to be rerendered if parent rerenders. I have tried using useMemo in parent and React.memo in child but no luck, it's still showing log 'Rendering Product component..' every time parent rerenders. What am I missing here? Please advice.</p>
  <p>Note: Parent is expected to be rerendered every time I call addToCart function (of CartContext) in a Product component.</p>
  <p>I'm using CartContext, maybe related to this, I'm not sure. Here is the sandbox: <a href="https://codesandbox.io/s/dazzling-moore-po1c6?file=/src/App.js" rel="nofollow noreferrer">https://codesandbox.io/s/dazzling-moore-po1c6?file=/src/App.js</a></p>
  <p><strong>Home.tsx</strong></p>
  <pre><code>const [bestSellerDummy] = useState(
    [...new Array(5)].map((item, key) =&gt; ({
      id: key,
      imageUri:'https://1.jpg',
      name: 'My Dummy 1',
      price: 25,
    })),
  );
  
  const bestSellers = useMemo(() =&gt; {
    return bestSellerDummy.map((productDummy, key) =&gt; {
      return (
        &lt;Product key={key} product={productDummy} /&gt;
      );
    });
  }, [bestSellerDummy]);
  
  return (
    ...
    {bestSellers}
    ...
  )
  </code></pre>
  <p><strong>Product.tsx</strong></p>
  <pre><code>const Product: FunctionComponent&lt;IProductProps&gt; = (
    productProps,
  ) =&gt; {
    ...
    console.log('Rendering Product component..');
    ...
  }
  
  export default React.memo(Product);
  </code></pre>
  <p><strong>=== EDIT: MY VERSION OF ANSWER ===</strong></p>
  <p>Finally! After playing around with <code>useCallback</code>, <code>useMemo</code>, <code>fast-memoize</code> plugin.. What suits the best for me is using <code>useReducer</code> in Context combine with wrapping the expensive component with <code>React.memo</code>. I think this is the most clean and elegant way to optimize child components. Working sandbox is here: <a href="https://codesandbox.io/s/eloquent-albattani-8x7h9?file=/src/App.js" rel="nofollow noreferrer">https://codesandbox.io/s/eloquent-albattani-8x7h9?file=/src/App.js</a></p>