title: React functional component state change does not trigger child component to re-read its props
body: <p>I'm having this React functional component. We know that since v16.8, functional component has kind of "state". It uses useEffect to "setState" to state variable <em>products</em>.
  Then I pass <em>product</em> as prop for the child component *ProductGrid".
  I have the ProductOfCategory as parent component, it will fetch data from an URL and set the result to state variable "products". I want the child component ProductGrid to be able to read that data (change), so I made it looks like this.</p>
  
  <p>Parent:</p>
  
  <pre><code>    export default function ProductOfCategory() {
  
      let { categoryId } = useParams();
      const [products, setProducts] = useState([]);
  
      useEffect(() =&gt; {
          fetch('/products/cat/' + categoryId)
              .then(response =&gt; response.json())
              .then(data =&gt; {
                  setProducts(data);
                  console.log("Fetch me: ", data);
              });
      }, [categoryId]);
  
  
      return (
          &lt;div&gt;
              &lt;h3&gt;ID: {categoryId}&lt;/h3&gt;
              &lt;ProductGrid products={products} /&gt;
          &lt;/div&gt;
      );
  }
  </code></pre>
  
  <p>Child:</p>
  
  <pre><code>class ProductGrid extends Component {
  
      constructor(props) {
          super(props);
          this.state = { products: this.props.products};
          console.log("ProductGrid.props.products: ", this.props);
      }
  
      componentDidUpdate(prevProps, prevState, snapshot) {
          console.log("Grid did update, products: ", this.state.products);
      }
  }
  </code></pre>
  
  <p>Result:
  When the data in parent changes, I can see (in the console) that the child component (ProductGrid) is re-rendered also, but its prop variable "products" is NOT. It's always an empty array. What is the reason of this? Does it mean that functional component's state is different from legacy state?
  Is there someway to overcome this?</p>
  
  <p>Many thanks.</p>