React hooks：回调作为 prop 在调用时根据它重新渲染每个钩子

Question

In the example below, I'm getting in a loop when I call the onError prop in fetchItems() . I don't understand why, when called, it triggers hooks depending on it. How can I fix this? Thanks!

const Component = ({onError}) => {
  const [items, setItems] = useState([]);
  const itemsRef = useRef(items);

  const fetchItems = useCallback(() => {
    const [first] = itemsRef.current;
    fetchNewItemsSince(first || 0).then((newItems) => {
      setItems((oldItems) => [...oldItems, ...newItems]);
    }).catch(onError);
  }, [onError]);

  // Update ref to dispose closure on `items` state
  useEffect(() => {
    itemsRef.current = items;
  }, [items]);

  // Call once on mount
  useEffect(() => {
    fetchItems();
  }, [fetchItems]);

  // Make an interval
  useEffect(() => {
    const id = setInterval(fetchItems, ONE_MINUTE);

    return () => {
      clearInterval(id);
    };
  }, [fetchItems]);
};

Answer 1

Try setting the initial state with a function

Const [foo, setFoo] = useState(() => 'foo')

Your useCallback for that state instance probably runs once, correct me if I'm wrong, so if you set a function for useState it will only run once, consider is a component did mount but no update.

Maybe this is practice but I have never called something like [onError] without setting an error state, because that's what I think recognizes it.

So React is this great thing that renders certain components etc. UseEffect is great, I personally don't use it to change the state, that for me is usually done in the JSX.

I would do like a onClick handler with the UseState method and watch for changes there. Instead your running a function that runs a setState event and watches for an event.

Let me know if that works or not if you need any explanation.

Answer 2

As I said in the comments, onError is triggering a re-render on the parent and therefore the children will also render again.

Someone suggested removing onError from the useCallback array of dependencies. Although it might work, it is considered a bad practice because can lead to memory-leak. Have you tried to remove the useCallback wrap around your function?