The scene on pit

When using useEffect, useEffect(() => {params()},[]) expects the component to initialize params(). React warns that deps needs params. The official explanation for useEffect is that by default, effect will be executed at the end of each render round, but you can choose to have it executed only when certain values change. However, this will result in repeated useEffect execution, because when params are defined inside the component, any state update will cause the component to be re-rendered, so every params retrieved is a new function reference, so for useEffect, the internal function will be updated every time. However, we do not expect state updates to perform unrelated effects.

The difference between

UseMemo, useCallback, useEffect

  • const memo = useMemo(()=> deps, [deps])When the DEPS changes, the first function is executed and a MEMO value is returned
  • const memoFn = useCallback(() => {console.log(deps)}, [deps])When the DEPS changes, the function of the first argument is redefined, and the function is not executed
  • useEffect(() => {console.log(deps)},[deps])When the DEPS changes, the first function is executed

PS: Const memo = useMemo(() => () => {},[deps]) = const Memo = useCallback(() => {},[deps]))

To solve

The difference between useCallback and useMemo is that useCallback does not execute the function immediately after the DEPS changes. Instead, it redefines the function, returns it, and calls it when needed. Const params = useCallback(oldParams,[deps]); const params = useCallback(oldParams,[deps]); The component’s rendering is triggered, causing the params function to be redefined