Estoy tratando de pasar el setter del componente principal al componente secundario, pero cuando invoqué al setter, no activó el useEffect del padre.

 const Product = ({ product }) => { return ( <div className="border border-black rounded border-2 p-5 flex m-5"> <div className="w-1/3"> <p>Name: <span>{product.name}</span></p> </div> <div className=""> <p>Price: <span>{product.price}</span></p> </div> </div> ) } const CreateForm = ({addProduct}) => { //renders a POST form for adding product when submit is clicked it triggers //addProduct } const Main () => { const [products, setProducts] = useState([]) const fetchData () => { fetch("get/products") .then(response => response.json()) .then(data => setProducts(data)) } useEffect(() => { console.log("useEffect triggered!") fetchData(); }, []) const addProduct = (product) => { const updatedProducts = [...products, product] setProducts(updatedProducts) } const data = products.map(product => <Product product={product}/>) return ( <div className="m-10"> <CreateForm addProduct={addProduct}/> {data} </div> ) }

Cuando se hace clic en el botón Enviar, realiza una solicitud POST creando un producto y se invoca el addProduct