есть ли внутри `useCallback` что-то вроде` useRef.current`, которое гарантирует, что вызовы всегда будут использовать последнюю версию обратного вызова?

Question

У меня ситуация, когда я загружаю несколько наборов данных; пользователь может выбрать, сколько загружать. Все наборы данных отображаются на одной диаграмме. Наборы данных загружаются индивидуально и асинхронно.

Код - это что-то вроде

export const DatasetGraph = ({userSelections}) => {
    const [datasets, setDatasets] = useState({});
    // when a selection changes, update the data
    useEffect(() => {
        // while loading a dataset, it is visible but has no data
        setDatasets(userSelections.map(selec => ({ dsname: [] })));
        // trigger asynchronous loads for each new dataset
        userSelections.forEach((dsname) => fetchDataset(dsname));
    }, [userSelections]);

    const fetchDataset = async (dsname) => {
        response = await fetch(url + dsname);
        // QUESTION: after the await, will this call the most recent version of
        // the callback? Will it use the most recent datasets object or an old
        // one saved in the useCallback closure?
        updateDataset(dsname, response);
    };

    // when a fetch returns, update the empty placeholder with the real data
    const updateDataset = useCallback(
        // For this toy example, we could use a setState function to always
        // retrieve the latest `datasets`. However, this callback may use other
        // state which is really what this question is about.
        (dsname, response) => setDatasets({ ...datasets, dsname: response }),
        [datasets]
    );

    return <Graph data={datasets}></Graph>;
};

Я еще не пробовал, чтобы каждый набор данных был компонентом React, который ничего не отображает. DOM, который затем может управлять своим собственным состоянием загрузки. На самом деле это могло бы быть проще.

Answer 1

useCallback использует массив dependencies для обнаружения изменений

Метод useCallback использует массив dependencies, который вы ему передаете, чтобы запоминать значение вашей функции. Ваша функция будет воссоздаваться каждый раз, но не будет присвоена updateDataset, если один из dependencies не изменился.

Вам следует с осторожностью использовать useCallback, если только компонент ниже вашей функции не требует больших затрат на повторную визуализацию, в противном случае useCallback не окажет большого положительного эффекта на производительность вашего приложения, если вообще будет иметь положительный эффект.

Он работает так же, как useMemo, чтобы гарантировать, что ваши данные в случае из useCallback это функция, которая обновляется в вашей переменной только тогда, когда что-то, от чего она зависит, изменилось.