React hooks：如何摆脱 state 依赖

Question

In the exemple below, I wonder how to get rid of items dependency in the useEffect() I want to execute only once to set the interval. What's the best practice around that? Thanks!

const Component = () => {
  const [items, setItems] = useState([])

  useEffect(() => {
    const fetchItems = () => {
      fetchNewItemsSince(items.length ? items[items.length - 1].id : 0) // How to get rid of items dependency
        .then((newItems) => {
          setItems((oldItems) => [...oldItems, ...newItems])
        })
    }

    fetchItems()
    setInterval(fetchItems, 60 * 10000)

    return () => clearInterval()
  }, [items]) // <= I want to get rid of that dependency!!
}

Answer 1

There are few mistakes in this snippets like cleaning the interval and calling the cleaning function in useEffect , I would re-write this logic to:

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

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

  // 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 2

I'd do something like this, using the useInterval hook from the react-use library :

const Component = () => {
  const [items, setItems] = useState([]);
  const lastItemId = useMemo(
    () => (items.length ? items[items.length - 1].id : 0),
    [items],
  );
  const fetchNewItems = useCallback(async () => {
    const newItems = await fetchNewItemsSince(lastItemId);
    if(newItems.length) {
      setItems((oldItems) => [...oldItems, ...newItems]);
    }
  }, [lastItemId, setItems]);
  useInterval(fetchNewItems, 60 * 10000);
};