There are times that a page would error out if on initial load, it renders more than once. Rendering more than once unnecessarily is always a waste of resource and loading time, but in some occasion, the page stops loading if there are more than one initial load. For example, loading a map.

React hooks useEffect emits side effect from an update from current system. Sometimes at initial load, the system IS going through some changes, but this side effect should not run (in addition to the initial load). In order to deal with that, we can use a custom hook to detect whether it's an initial load or not, and if it is, stop there.

The custom hook looks like this:

 const useDidMountEffect = (setTheFilter, deps) => {
    const didMount = useRef(false);
    useEffect(() => {
      if (didMount.current) {
        setTheFilter();
      } else {
        didMount.current = true;
      }
    }, deps);
  };

And the usage is to set filter if the form data updates:

useDidMountEffect(() => {
    if (!isEqualDeepEqual(formData, previousFormData)) {
      setFilter(formData);
    }
  }, [formData]);

Due to the useRef(false) clause in the custom hook, the first load would pass the setTheFilter call. Once it passes initial load, setTheFilter call would be invoked, provided the formData updated.

This way it'd prevent the page loading more than once initially.