I have been using React Hooks for a few months now and I am absolutely loving it! Today I would like to share 2 simple tips that I have learned along the way. Hopefully you will find them useful!
\nOne common use case for useEffect hook is to fetch some data from REST API and display them:
useEffect(() => {\n\tconst fetchUserData = async () => {\n\t\tconst response = await API.getUserData(userId);\n\t\tsetUserData(response.userData);\n\t};\n\n\tfetchUserData();\n}, [userId);This looks fine at first glance but there are actually 2 potential bugs here:
\nuserId changes before the previous request returns, this will cause the component to send another request which may lead to race condition (The first request returns after the second one and override the state).To prevent those bugs we can simply add a local variable ignore:
useEffect(() => {\n\tlet ignore = false;\n\n\tconst fetchUserData = async () => {\n\t\tconst response = await API.getUserData(userId);\n\t\tif (!ignore) {\n\t\t\tsetUserData(response.userData);\n\t\t}\n\t};\n\n\tfetchUserData();\n\treturn () => {\n\t\tignore = true;\n\t};\n}, [userId);ignore will be set to true when ever the component is unmounted or the dependency array has changed (userId changed in this case). Therefore setUserData will not be called!
This pattern is documented in React’s official documentation.
\nSometimes when we write custom hooks we want that hook to be able to take a dynamic object or array as input. For example consider this useAPI custom hook:
// usage\nconst response = useAPI({\n\turl: ‘/api/get-user’,\n\tbody: { userId },\n});\n\n// implementation\nfunction useAPI({ url, body }) {\n\tconst [response, setResponse] = useState(null);\n\n\tuseEffect(() => {\n\t\t// do the request here\n\t}, [url, body]);\n\n\treturn response;\n}This is a nice handy custom hook, but there is just one problem. Whenever there is a re-render, body is passed in as a new object and useEffect will get triggered again. This will cause an infinite loop!
Sure, we can wrap the body object in an useMemo hook, but it becomes a pain in the ass when you have to do that every time you use useAPI!
To solve this, we can write another custom hook useDeepMemo:
// you can also use other deep compare functions\n// e.g. lodash’s _.isEqual\nimport { equal } from ‘@wry/equality’;\n\nfunction useDeepMemo(memoFn, key) {\n const ref = useRef();\n\n if (!ref.current || !equal(key, ref.current.key)) {\n ref.current = { key, value: memoFn() };\n }\n\n return ref.current.value;\n}I first saw this technique from Apollo’s source code. This is a replacement for useMemo but it uses deep equality to compare memo keys and it guarantees that the memo function will only be called if the keys are unequal.
With that, we can then rewrite our useAPI hook:
function useAPI({ url, body }) {\n\tconst [response, setResponse] = useState(null);\n\tconst cachedBody = useDeepMemo(() => body, [body]);\n\n\tuseEffect(() => {\n\t\t// do the request here\n\t}, [url, cachedBody]);\n\n\treturn response;\n}Now we can use useAPI without worrying about accidentally causing an infinite loop!