javascript / expert
Snippet
Granulare Context-Nutzung durch Split Provider Pattern
Der standardmäßige React Context löst bei jeder Änderung des Value-Objekts einen Rerender bei allen Consumern aus. Durch das Aufteilen von Daten (State) und Aktionen (Dispatcher) in separate Contexts müssen Komponenten, die nur Aktionen auslösen (wie ein Login-Button), nicht neu gerendert werden, wenn sich der State (über das Benutzerprofil) ändert. Dies ist eine entscheidende Performance-Optimierung für große Anwendungen.
snippet.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
const AuthContext = createContext(null);const AuthActionsContext = createContext(null);export const AuthProvider = ({ children }) => {const [user, setUser] = useState(null);const login = useCallback((u) => setUser(u), []);return (<AuthContext.Provider value={user}><AuthActionsContext.Provider value={login}>{children}</AuthActionsContext.Provider></AuthContext.Provider>);};export const useUser = () => useContext(AuthContext);export const useAuthActions = () => useContext(AuthActionsContext);
react
Erklärung
1
const AuthActionsContext = createContext(null);
Erstellt einen dedizierten Context speziell für stabile Funktionsreferenzen.
2
const login = useCallback((u) => setUser(u), []);
Die Verwendung von useCallback stellt sicher, dass die Funktionsreferenz über Rerenders hinweg stabil bleibt.
3
export const useAuthActions = () => useContext(AuthActionsContext);
Benutzerdefinierter Hook für sauberen Zugriff auf Aktionen, ohne Rerenders bei Statusänderungen auszulösen.