I have a custom hook and inside I'm doing this:
useEffect(() => {
dimensions.forEach(dimension => {
dimension.filterFunction(...);
});
}, [ dimensions, endDate, startDate ]);
the problem is that this runs every time because I'm passing a new dimensions array. In the parent if I do const dimensions = useMemo(() => [ dimension ], [ dimension ]) it fixes it. But is there a way I can prevent this from inside my custom hook?
What about passing dimensions as a parameter to a function wrapping your useEffect() and removing it from the array that's the second argument to useEffect?
const useDimensions = (dimensions) => {
useEffect(() => {
dimensions.forEach(dimension => {
dimension.filterFunction(...);
});
}, [ endDate, startDate ]);
};
That should keep it from re-rendering and you should be able to call it whenever you need to.
const dimensions = useDimensions(), shouldn't this return dimensions? thanks for the answer
useEffecttriggers when it is passed the samedimensionsarray, as in the contents have not changed? BecauseuseEffectcannot perfom equality checks on arrays - you've basically added the equality check in withuseMemo, which seems like a reasonable solution. The only other way I can think of is to store the previous value ofdimensionsand manually check it, which seems like it would be much less elegant. Also, FYI, useEffect is not a custom hook.useEffectis not a custom hook. I'm using it inside my custom hook.