reactjs - React 機能コンポーネントの状態の変更は、子コンポーネントがその props を再読み取りすることをトリガーしません

Question

私はこのReact機能コンポーネントを持っています。v16.8以降、機能コンポーネントには一種の「状態」があることがわかっています。useEffect を使用して "setState" を使用して変数productsを状態にします。次に、子コンポーネント *ProductGrid のプロップとしてproductを渡します。親コンポーネントとして ProductOfCategory があり、URL からデータを取得し、結果を状態変数「products」に設定します。子コンポーネントの ProductGrid を使用できるようにしたいそのデータを読み取る（変更する）ので、このようにしました。

親：

    export default function ProductOfCategory() {

    let { categoryId } = useParams();
    const [products, setProducts] = useState([]);

    useEffect(() => {
        fetch('/products/cat/' + categoryId)
            .then(response => response.json())
            .then(data => {
                setProducts(data);
                console.log("Fetch me: ", data);
            });
    }, [categoryId]);


    return (
        <div>
            <h3>ID: {categoryId}</h3>
            <ProductGrid products={products} />
        </div>
    );
}

子：

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);
    }
}

結果: 親のデータが変更されると、(コンソールで) 子コンポーネント (ProductGrid) も再レンダリングされることがわかりますが、その prop 変数「products」はそうではありません。常に空の配列です。これの理由は何ですか？機能コンポーネントの状態がレガシー状態と異なるということですか? これを克服する方法はありますか？

どうもありがとう。