Можно ли не дробив контекст, настроить мемоизацию для устранения лишних перерендеров React?

Я использую React Context в паре с Reducer для всех filters следующим образом:

const FiltersContext = createContext(initialFilters);
const FiltersDispatchContext = createContext<React.Dispatch<TAction> | null>(null);

export const FiltersProvider = ({ children }: { children: React.ReactNode }) => {
    const [ filters, dispatch ] = useReducer(filtersReducer, initialFilters);

    return (
        <FiltersContext.Provider value={filters}>
            <FiltersDispatchContext.Provider value={dispatch}>
                { children }
            </FiltersDispatchContext.Provider>
        </FiltersContext.Provider>
    )
}

export const useFilters = () => {
    const filters = useContext(FiltersContext);

    if (!filters) {
        throw Error('Error state');
    }

    return filters;
}

export const useFiltersDispatch = () => {
    const dispatch = useContext(FiltersDispatchContext);

    if (!dispatch) {
        throw Error('Error dispatch');
    }

    return dispatch;
}

const filtersReducer = (filters: IFilters, action: TAction) => {
    switch (action.type) {
        case 'searched':
            return {
                ...filters,
                page: 1,
                search: action.search
            }

        case 'sorted':
            return {
                ...filters,
                page: 1,
                sort: action.sort
            };

        case 'reseted':
            return initialFilters;

        case 'selectedYears':
            return {
                ...filters,
                years: action.newYears
            };
        
        case 'selectedGenre':
            return {
                ...filters,
                page: 1,
                genresIds: action.genresIds
            };

        case 'selectedPage':
            return {
                ...filters,
                page: action.page
            }

        default:
            return filters;
    }
}

На моем Sidebar есть отдельные компоненты фильтров, в которых я получаю useFilters и достаю нужное свойство, например search Решил поработать над оптимизацией, используя React dev tools И обнаружил, что при изменении одного фильтра, все остальные компоненты фильтров так же перерендериваются Мне бы хотелось исправить это. Погуглив наткнулся на разные предложения Дробить контекст мне бы не хотелось

Одно из найденных решений, попробовал реализовать на SearchFilm компоненте Я создал родительский компонент SearchFilmParent, в котором получаю контекст filters и передаю search пропсом в дочерний SearchFilm, предварительно обернув memo Код этих компонентов ниже

import { useCallback } from "react";
import { useFilters, useFiltersDispatch } from "../../../../contexts/filters";
import SearchFilm from "./SearchFilm";

const SearchFilmParent = () => {
    const { search } = useFilters();
    const dispatch = useFiltersDispatch();

    const handleChangeSearch = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
        const currentSearch = event.currentTarget.value;

        dispatch({
            type: 'searched',
            search: currentSearch
        })
    }, [dispatch]);

    return (
        <SearchFilm search={search} handleChangeSearch={handleChangeSearch} />
    );
}

export default SearchFilmParent;
import React from "react";
import { TextField } from "@mui/material";
import { TEXTS } from "../../../../constants";

interface SearchProps {
    search: string;
    handleChangeSearch: (event: React.ChangeEvent<HTMLInputElement>) => void;
}

const SearchFilm = ({ search, handleChangeSearch }: SearchProps) => {
    return (
        <TextField
            fullWidth
            size='small'
            label={TEXTS.SEARCH_FILMS}
            value={search}
            onChange={handleChangeSearch}
        />
    )
}

export default React.memo(SearchFilm);

Но мой компонент по-прежнему перерендеривается при измении других фильмов Мне бы хотелось решить эту проблему, без дробления context и пока без использования Redux, желательно использовав мемоизацию


Ответы (0 шт):