Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

113
Visualizações
Can a mutable object in Redux store that is only mutated outside of Redux cause unexpected side effects?

Given this situation:

  • There is a mutable object inside the Redux store
  • Reducers do not mutate the object; all reducers are still pure functions with no side effects
  • The mutable object is sometimes mutated outside of Redux, for example, by calling methods on the object itself

My question is, is this "safe" to do, or could there be problematic side effects, and if so what and why? In particular, can this impact performance, can it mess with the way Redux re-computes states, and can it mess with the rendering of React components if the object is passed down to them from the Redux store as a prop?

about 4 years ago · Juan Pablo Isaza
1 Respostas
Responde à pergunta

0

You should never mutate values that are in the Redux state, ever:

  • https://redux.js.org/style-guide/style-guide#do-not-mutate-state

This can and will absolutely cause side effects, including the app potentially not rendering when it needs to.

If this "mutable object" you're referring to is some kind of class instance or similar, that also doesn't belong in the Redux store:

  • https://redux.js.org/style-guide/style-guide#do-not-put-non-serializable-values-in-state-or-actions

edit

Per the discussion in comments, here's how I would suggest handling something like this WebGL context thing:

const SomeParentComponent = () => {
  // Use Redux state to decide when we should show this
  const showWebGl = useSelector(state => state.ui.showWebGl);
  // Standard hooks "forceRender" implementation
  const [, forceRender] = useReducer(c => c + 1, 0)
  // Ref to hold the WebGL instance
  const webGlRef = useRef(null);

  useLayoutEffect(() => {
    if (showWebGl) {
      webGlRef.current = magicallyCreateWebGlInstance();
      forceRender(); // have to force a re-render to pass down the ref value
    }
    
    return () => {
      if (webGlRef.current) {
        magicallyDestroyWebGlInstance(webGlRef.current)
      }
    }

  }, [showWebGl])

  return (
    <MyWebGlContext.Provider value={webGlRef.current>
      <RestOfAppGoesHere />
    </MyWebGlContext.Provider>
  )
}

The WebGL instance itself doesn't belong in the store, because it's not state, and it's not serializable. A Redux store shouldn't be used just as a way to hand around arbitrary values, especially if those values aren't plain JS data.

This way, the Redux state still drives whether the WebGL instance is being created, but the instance itself lives entirely in the UI layer and is still accessible to the rest of the component tree.

about 4 years ago · Juan Pablo Isaza Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda