Почему заходит в render функцию через react-hooks?

Question

[Макс Жуков]

Всем привет, это отрывок кастомного хука, не подскажите почему в renderSourceList он не заходит(как и нужно, если sources не изменились), а в renderItem заходит всегда(хотя я и здесь использую useMemo)?

const renderItem = useMemo(() => (source) => {
        const { name: sourceName } = source;
        const labelClassName = `source__label-name source__label-name-${sourceName.toLowerCase()}`;
        return (
            <List.Item className="source">
                <Checkbox
                    disabled={source.name === 'radius'}
                    checked={source.isSelected}
                    onChange={() => handleSourceChecked(source)}
                    className="source__checkbox"
                />
                <span className={classNames('source__label', labelClassName)}>
                    {dataSourceLabelConfig[sourceName] || sourceName.toUpperCase() }
                </span>
                <span className="source__label">{`${source.nodeCount} nodes`}</span>
                <span className="source__label source__label-date">
                    {fromNow(source.updated)}
                </span>
                <button className="source__button" type="button" onClick={() => handleSourceRefresh(source)}>
                    <Icon className="source__icon" type="reload" width="20" height="20" />
                </button>
            </List.Item>
        );
    }, [sources]);


    const renderSourceList = useMemo(() => () => {
        const newSources = [...sources];
        if (newSources.length) {
            newSources.push({
                name: 'radius',
                isSelected: false,
                updated: newSources[0].updated,
                nodeCount: 0
            });
        }
        return (
            <Card title="Sources">
                <List
                    size="small"
                    dataSource={newSources}
                    renderItem={renderItem}
                    split={false}
                />
            </Card>
        );
    }, [sources]);

Answer 1

[Антон Спирин]

Вы уверены, что вы понимаете как работает вызов useMemo? Он в вашем случае возвращает render функцию, которая вызывается каждый раз и пересчитывается только если свойство sources изменилось. Более того в renderItem свойство sources даже не используется, так что вы и заметить ничего не должны.
В таком виде в каком используете useMemo вы, его использовать бессмысленно. Уместней просто вынести эти функции как отдельные компоненты. Либо вынести только renderItem, а renderSourceList переписать так:

renderSourceList = useMemo(() => {
  if (newSources.length) {
    // ...
  }
  return (
    // ...
  );
});

Тогда будете получать меморизированное значение. Но это уместно только если компонент часто перерисовывается, а список при этом не меняется.

Comments

[Макс Жуков]

Вынес renderItem функцию за пределы UseSource(Кастомный хук), но всё равно туда заходит.
Даже если я передам в renderItem (text) он в любом случае зайдет в renderItem, хотя в сам renderSourceList он не заходит.
У меня уже есть отдельный компонент, просто мне нужно будет использовать его и сам хук, так как я хочу использовать только хук с отображение компонента.
Всё же не могу понять почему в случае renderSourceList он туда не заходит, а в случае renderItem заходит всегда?

[Антон Спирин]

Макс Жуков, внимательно прочитайте ответ. Ваш вызов useMemo(() => fn) возвращает fn, функцию, которая будет вызываться каждый рендер, а при изменении sources useMemo просто вернет новую ее копию(точно такую же). Использовать useMemo с renderItem бессмысленно.
Вам для начала стоит с основами JavaScript разобраться. Почитайте про каррирование.

[Макс Жуков]

Антон Спирин, Хорошо, по вашему мне нужно вынести renderItem функцию с разметкой за пределы хука и использовать ее в props(renderItem) List ?

[Антон Спирин]

Макс Жуков, я вам не могу порекомендовать ничего объективного пока не увижу весь код, но renderItem однозначно не нуждается в меморизации. Попробуйте сами подумать почему.

[Макс Жуков]

Вот весь кастомный хук.

import React, {
    useState, useCallback, useMemo
} from 'react';
import { refreshSource } from 'src/apiRequests';
import { List, Checkbox, Card } from 'antd';
import dataSourceLabelConfig from 'src/configs/dataSourceLabelConfig';
import { fromNow } from 'src/utils/dateTimeUtil';
import Icon from 'src/components/icons/Icon';
import classNames from 'classnames';

const renderItem = ({ handleSourceChecked, handleSourceRefresh }) => (source) => {
    const { name: sourceName } = source;
    const labelClassName = `source__label-name source__label-name-${sourceName.toLowerCase()}`;
    return (
        <List.Item className="source">
            <Checkbox
                disabled={source.name === 'radius'}
                checked={source.isSelected}
                onChange={() => handleSourceChecked(source)}
                className="source__checkbox"
            />
            <span className={classNames('source__label', labelClassName)}>
                {dataSourceLabelConfig[sourceName] || sourceName.toUpperCase() }
            </span>
            <span className="source__label">{`${source.nodeCount} nodes`}</span>
            <span className="source__label source__label-date">
                {fromNow(source.updated)}
            </span>
            <button className="source__button" type="button" onClick={() => handleSourceRefresh(source)}>
                <Icon className="source__icon" type="reload" width="20" height="20" />
            </button>
        </List.Item>
    );
};

function UseSource() {
    const [sources, setSources] = useState([]);

    const handleSourceChecked = useCallback((checkedSource) => {
        const newSources = sources.map((source) => {
            if (source.name === checkedSource.name) {
                return {
                    ...source,
                    isSelected: !source.isSelected
                };
            }
            return source;
        });
        setSources(newSources);
    }, []);
    const handleSourceRefresh = useCallback(async ({ name }) => {
        const res = await refreshSource(name);
        const newSources = sources.map((source) => {
            if (source === name) {
                return {
                    ...source,
                    updated: res.update_at
                };
            }
            return source;
        });
        setSources(newSources);
    }, []);
    const filterBySource = (data) => {
        const filteredNodes = data.nodes
            .filter(node => sources
                .some(source => source.name === node.source && source.isSelected));
        const filteredLinks = data.links
            .filter(link => filteredNodes
                .some(node => node.id === link.startID || node.id === link.endID));
        const filteredData = { links: filteredLinks, nodes: filteredNodes };
        return filteredData;
    };

    const renderSourceList = useMemo(() => {
        const newSources = [...sources];
        if (newSources.length) {
            newSources.push({
                name: 'radius',
                isSelected: false,
                updated: newSources[0].updated,
                nodeCount: 0
            });
        }
        return (
            <Card title="Sources">
                <List
                    size="small"
                    dataSource={newSources}
                    renderItem={renderItem({ handleSourceChecked, handleSourceRefresh })}
                    split={false}
                />
            </Card>
        );
    }, [sources]); // TODO: Clean up the mock

    return {
        sources,
        renderSourceList,
        setSources,
        handleSourceChecked,
        handleSourceRefresh,
        filterBySource
    };
}

export default UseSource;

[Антон Спирин]

Макс Жуков, не ясно зачем вам вообще выносить renderSourceList и filterBySource в UseSources. Вы собираетесь это где-то переиспользовать? Если нет, то не нужно их туда выносить. Только усложняете код.
UseSource правильней назвать с маленькой буквы.
В использовании useCallback, в вашем случае, нет смысла, так как вы не передаете свойства вторым аргументом.

[Макс Жуков]

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

[Антон Спирин]

Макс Жуков, да в этом смысл есть. Вам тогда надо передавать sources вторым аргументом, чтобы по изменению sources возвращался новый колбек использующий новый массив sources. В противном случае, он будет работать со старым массивом, в котором могут отсутствовать новые элементы или присутствовать старые.

Оставьте в useSources только useState и хандлеры. Остальное можно использовать по факту. Ту же функцию filterBySource можно вынести, добавив второй аргумент:
const filterBySource = (data, sources) => ...

[Макс Жуков]

Спасибо большое, но всё же я не понял как измбежать перерисовывания для renderItem, как react туда может заходить если он не заходит в renderSourceList?)

[Антон Спирин]

Макс Жуков, объясните с чего вы взяли что renderItem перерисовываются без renderSourceList?
А вообще компонент List вполне может жить своей жизнью и вызывать свои методы жизненного цикла как ему заблагорассудится. Надо его код смотреть.

[Макс Жуков]

Антон Спирин, просто смотрел в дебаг что renderSourceList не заходит(в сам List), а вот в renderItem точка останова заходит.

[Антон Спирин]

Макс Жуков, так на один вызов renderSourceList, renderItem вызывается итератором ровно столько раз, сколько у вас элементов в списке.