Es importante entender el código de forma correcta antes de aplicarlo a tu proyecto y si ttienes algo que aportar puedes compartirlo con nosotros.
Solución:
Hay algunas formas de evitar volver a renderizar, también hacer que su administración de estado sea “similar a redux”. Te mostraré cómo lo he estado haciendo, lejos de ser un redux, porque redux ofrece muchas funcionalidades que no son tan triviales de implementar, como la capacidad de enviar acciones a cualquier reductor desde cualquier acción o combineReducers, etc. muchos otros.
Crea tu reductor
export const initialState =
...
;
export const reducer = (state, action) =>
...
;
Cree su componente ContextProvider
export const AppContext = React.createContext(someDefaultValue)
export function ContextProvider(props)
const [state, dispatch] = useReducer(reducer, initialState)
const context =
someValue: state.someValue,
someOtherValue: state.someOtherValue,
setSomeValue: input => dispatch('something'),
return (
props.children
);
Use su ContextProvider en el nivel superior de su aplicación, o donde lo desee
function App(props)
...
return(
...
)
Escribir componentes como componente funcional puro
De esta manera, solo se volverán a procesar cuando esas dependencias específicas se actualicen con nuevos valores.
const MyComponent = React.memo((
somePropFromContext,
setSomePropFromContext,
otherPropFromContext,
someRegularPropNotFromContext,
) =>
... // regular component logic
return(
... // regular component return
)
);
Tener una función para seleccionar accesorios del contexto (como mapa redux…)
function select()
const someValue, otherValue, setSomeValue = useContext(AppContext);
return
somePropFromContext: someValue,
setSomePropFromContext: setSomeValue,
otherPropFromContext: otherValue,
Escribir un HOC connectToContext
function connectToContext(WrappedComponent, select)
return function(props)
const selectors = select();
return Ponlo todo junto
import connectToContext from ...
import AppContext from ...
const MyComponent = React.memo(...
...
)
function select()
...
export default connectToContext(MyComponent, select)
Uso
Demostración que hice en otra pregunta de StackOverflow
Demostración en codesandbox
El re-render evitado
MyComponent se volverá a representar solo si los accesorios específicos del contexto se actualizan con un nuevo valor; de lo contrario, permanecerá allí. El código dentro select se ejecutará cada vez que cualquier valor de las actualizaciones de contexto, pero no hace nada y es barato.
Otras soluciones
Sugiero revisar esto Evitar renderizaciones con React.memo y useContext hook.
Según tengo entendido, la API de contexto no está destinada a evitar volver a renderizar, sino que se parece más a Redux. Si desea evitar volver a renderizar, tal vez considere PureComponent o gancho de ciclo de vida shouldComponentUpdate.
Aquí hay un excelente enlace para mejorar el rendimiento, también puede aplicar lo mismo a la API de contexto