React tips teach you how to get rid of hooks dependency troubles

A very common scenario in react projects:

const [watchValue, setWatchValue] = useState('');
const [otherValue1, setOtherValue1] = useState('');
const [otherValue2, setOtherValue2] = useState('');

useEffect(() => {
    doSomething(otherValue1, otherValue2);
}, [watchValue, otherValue1, otherValue2]);

We want to execute doSomething when watchValue changes, which will reference other values otherValue1 and otherValue2 .

Here comes a troubling question:

• If otherValue1 and otherValue2 are not added to the dependency array, doSomething is likely to access the old variable references of otherValue1 and otherValue2 , resulting in unexpected errors (if hooks -related eslint is installed, a warning will be prompted).
• On the contrary, if otherValue1 and otherValue2 are added to the dependency array, doSomething will also be executed when these two values ​​change, which is not what we want (we only want to reference their values, but do not want them to trigger doSomething ).

This problem can be solved by changing otherValue1 and otherValue2 into ref :

const [watchValue, setWatchValue] = useState('');
const other1 = useRef('');
const other2 = useRef('');

// ref does not need to be added to the dependency array because the reference remains unchanged useEffect(() => {
    doSomething(other1.current, other2.current);
}, [watchValue]);

In this way, the variable references of other1 and other2 will not change, which solves the previous problem, but introduces a new problem: when the current value of other1 and other2 changes, it will not trigger component re-rendering (changes useRef的current will not trigger component rendering), so the interface will not be updated when the value changes!

This is a headache in hooks . The useState variable will trigger re-rendering and keep the interface updated, but when it is used as a dependency of useEffect , it will always trigger unwanted function execution. The useRef variable can be safely used as a useEffect dependency, but it will not trigger component rendering and the interface will not be updated.
How to solve it?

You can combine the features of useRef and useState to construct a new hooks function: useStateRef .

import { useState, useRef } from "react";

// Use the reference trait of useRef while maintaining the responsiveness of useState type StateRefObj<T> = {
  _state: T;
  value: T;
};
export default function useStateRef<T>(
  initialState: T | (() => T)
): StateRefObj<T> {
  // Initialization value const [init] = useState(() => {
    if (typeof initialState === "function") {
      return (initialState as () => T)();
    }
    return initialState;
  });
  // Set a state to trigger component rendering const [, setState] = useState(init);
  
  // When reading value, the latest value is obtained // When setting value, setState will be triggered and component rendering const [ref] = useState<StateRefObj<T>>(() => {
    return {
      _state: init,
      set value(v: T) {
        this._state = v;
        setState(v);
      },
      get value() {
        return this._state;
      },
    };
  });
  
  // What is returned is a reference variable, which remains unchanged during the entire component life cycle return ref;
}

So, we can use it like this:

const watch = useStateRef('');
const other1 = useStateRef('');
const other2 = useStateRef('');

// Change the value like this: watch.value = "new";

useEffect(() => {
    doSomething(other1.value, other2.value);
   // Actually, these three values ​​are now reference variables, which remain unchanged during the entire component life cycle, so there is no need to add dependency arrays. // However, the eslint plugin of react hooks can only recognize useRef as a reference. If it is not added, it will warn people. For the safety of variable references, it is still added. }, [watch.value, other1, other2]);

In this way, watch, other1 , and other2 have the reference feature of useRef and will not trigger unnecessary execution of doSomething . With the responsiveness of useState , changing .value will trigger component rendering and interface updates.
When we want the variable change to trigger doSomething , we add watch.value to the dependency array. When we just want to reference the value and don't want it to trigger doSomething , we add the variable itself to the array.

The above is the details of the React tips on how to get rid of the troubles of hooks dependency. For more information about React hooks dependency, please pay attention to other related articles on 123WORDPRESS.COM!