refactor(29-01): memoize MixersContext provider value
- Add useMemo wrapper around mixerHelper value - Prevents new object creation on every render - Depends on stable mixerHelper (from Task 1a) - Context consumers now only re-render when data actually changes This eliminates cascading re-renders when unrelated state updates occur. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
parent
d008fe977c
commit
6b5b0990bb
|
|
@ -1,4 +1,4 @@
|
||||||
import React, { createContext, useContext } from 'react';
|
import React, { createContext, useContext, useMemo } from 'react';
|
||||||
import useMixerHelper from '../hooks/useMixerHelper.js';
|
import useMixerHelper from '../hooks/useMixerHelper.js';
|
||||||
|
|
||||||
const MixersContext = createContext();
|
const MixersContext = createContext();
|
||||||
|
|
@ -6,8 +6,11 @@ const MixersContext = createContext();
|
||||||
export const MixersProvider = ({ children }) => {
|
export const MixersProvider = ({ children }) => {
|
||||||
const mixerHelper = useMixerHelper();
|
const mixerHelper = useMixerHelper();
|
||||||
|
|
||||||
|
// Memoize context value to prevent unnecessary re-renders of consumers
|
||||||
|
const value = useMemo(() => mixerHelper, [mixerHelper]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<MixersContext.Provider value={mixerHelper}>
|
<MixersContext.Provider value={value}>
|
||||||
{children}
|
{children}
|
||||||
</MixersContext.Provider>
|
</MixersContext.Provider>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue