React

useContextSelector: Ускорение работы React-приложений

Случалось ли вам иметь контекст, который был настолько велик, что негативно влиял на производительность вашего React-приложения? Это происходит потому, что одно изменение значения контекста приводит к рендерингу всех компонентов, зависящих от этого контекста.

Классический пример - контекст темы, хранящий все цвета, шрифты и другие стили пользовательского интерфейса.

import { createContext, useState } from 'react';

const defaultTheme = { color: '#aabbcc', fontFamily: 'Arial', fontSize: 16 };

export const ThemeContext = createContext(defaultTheme);

export const ThemeContextProvider = ({ value = defaultTheme, children }) => {
    const [theme, setTheme] = useState(value);
    return (
        <ThemeContext.Provider value={{ theme, setTheme }}>
            {children}
        </ThemeContext.Provider>
    );
};

export const useTheme = () => {
    const { theme } = useContext(ThemeContext);
    return theme;
}

https://marmelab.com/blog/2024/10/16/usecontextselector-a-faster-usecontext-for-react.html

✍️ @React_lib

www.tg-me.com/cn/telegram/com.React_lib/613

1.1K viewsedited  Nov 12, 2024 at 09:26

useContextSelector: Ускорение работы React-приложений

Случалось ли вам иметь контекст, который был настолько велик, что негативно влиял на производительность вашего React-приложения? Это происходит потому, что одно изменение значения контекста приводит к рендерингу всех компонентов, зависящих от этого контекста.

Классический пример - контекст темы, хранящий все цвета, шрифты и другие стили пользовательского интерфейса.

import { createContext, useState } from 'react';

const defaultTheme = { color: '#aabbcc', fontFamily: 'Arial', fontSize: 16 };

export const ThemeContext = createContext(defaultTheme);

export const ThemeContextProvider = ({ value = defaultTheme, children }) => {
    const [theme, setTheme] = useState(value);
    return (
        <ThemeContext.Provider value={{ theme, setTheme }}>
            {children}
        </ThemeContext.Provider>
    );
};

export const useTheme = () => {
    const { theme } = useContext(ThemeContext);
    return theme;
}

BY React