React hooks - trigger useEffect when a nested property changes in a collection of objects

Question

A page displays a list of objects [{name:, age:}, ...] A second page allows to update the name of a particular object. Then using hooks, how should I implement useEffect() so the list on the front page updates only when a name change has been detected?

const [objects, setObjects] = useState([]);  useEffect(()=> {   getAllObjects() },[getAllObjects, objects]); 

Answer 1

Instead of passing the entire object to the dependency array, make sure that you only pass name. Which you can do by returning the names

const [objects, setObjects] = useState([])  useEffect(()=> {       getAllObjects() }, [getAllObjects, ...objects.map(item => item.name)]) 

Answer 2

Check https://dev.to/aileenr/til-you-can-watch-for-nested-properties-changing-in-react-s-useeffect-hook-26nj

One can just do:

useEffect(()=> {       // do something }, [values.name]) 

It's a fine solution if the object property always exists however if the property is not present at some point you get a reference error. A workaround in this scenario is to check if prop exists inside the hook

useEffect(()=> {     if (values?.name) {         // do something     } }, [values])