How to make useEffect in custom hook trigger only when props changed?

Question

In this video, Dan extract a useDocumentTitle custom hook, but I found the custom hook trigger multiple times, sometimes it is unnecessary. The question is how to trigger the useEffect function only when the key props changed?

It could be realized like this without using custom hooks:

useEffect(() => {
  console.log('useDocumentTitle ')

  document.title = myTitle);
}, [someProp])

But how to do it with custom hooks?

https://youtu.be/dpw9EHDh2bM?t=2969

Answer 1

You can simply pass the key as a separate argument and have the code you used above in the custom hook.

function useCustomHook({someProp, myTitle}) {
    useEffect(() => {
        console.log('useDocumentTitle ')

        document.title = myTitle);
    }, [someProp])
}

you would use it like:

const customHookOptions = {someProp: props.key, myTitle: 'the title'}
useCustomHook(customHookOptions)

Another thing you are able to do is only re-render the entire component if props change by using react.memo() https://reactjs.org/docs/react-api.html#reactmemo

There is also a hook useMemo which has it's own place for doing heavy work https://reactjs.org/docs/hooks-reference.html#usememo