If a setState holds an object, how to only listen and re-render based on only some properties of the object?

Question

const [var, set_var] = useState({prop_1: 1, prop_2: 2})

How to do this essentially:

useEffect(() =>, [var.prop_1])

useEffect(() =>, [var.prop_2])

Answer 1

Collect the properties you want to listen to from an array and add them to the [] in the useEffect deps.

const ages = students.map((s) => s.age);

useEffect(() => {
    // Now you can listen to any cahnges in the array Object for "age" property!
    console.info("ages", ages);
}, [ages]);

Demo