Refactor LayerApplicabilityDialog and RulesCard components to utilize useKeyedList for managing lists, improving state handling and performance. Update ScheduleGrid to enhance key assignment for mapped elements, ensuring better React reconciliation. Modify ManualInboxDialog to use unique keys for parts in sample name processing, and improve ToastProvider and ThemeProvider by memoizing context values to prevent unnecessary re-renders.
This commit is contained in:
@@ -1,4 +1,12 @@
|
||||
import { createContext, useContext, useEffect, useState, type ReactNode } from 'react'
|
||||
import {
|
||||
createContext,
|
||||
useCallback,
|
||||
useContext,
|
||||
useEffect,
|
||||
useMemo,
|
||||
useState,
|
||||
type ReactNode,
|
||||
} from 'react'
|
||||
|
||||
type Theme = 'light' | 'dark' | 'system'
|
||||
|
||||
@@ -36,12 +44,15 @@ export function ThemeProvider({ children }: { children: ReactNode }) {
|
||||
return () => media.removeEventListener('change', onChange)
|
||||
}, [theme])
|
||||
|
||||
const setTheme = (next: Theme) => {
|
||||
const setTheme = useCallback((next: Theme) => {
|
||||
localStorage.setItem(STORAGE_KEY, next)
|
||||
setThemeState(next)
|
||||
}
|
||||
}, [])
|
||||
|
||||
return <ThemeContext value={{ theme, setTheme }}>{children}</ThemeContext>
|
||||
// Литерал в value пересоздавался бы на каждый рендер и перерисовывал всех потребителей темы.
|
||||
const value = useMemo(() => ({ theme, setTheme }), [theme, setTheme])
|
||||
|
||||
return <ThemeContext value={value}>{children}</ThemeContext>
|
||||
}
|
||||
|
||||
export function useTheme(): ThemeContextValue {
|
||||
|
||||
Reference in New Issue
Block a user