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 parent
940b622c03
commit
8699d8ee00
8 files changed
+148
-90
No files matched your search
@@ -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