Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

152
Vistas
React state changes, but component doesn't re-render

Any help would be appreciated. I'm getting my data from an external database and feeding it in with observables. The component updates when the players state changes, but it doesn't update when the monsters state changes.

I can see that the state is correct and populated with non-zero data by debugging the component with the React Developer Tools. If I force players to update again, it does re-draw the monsters correctly, but setMonsters isn't itself causing a re-render.

export default () => {
  const [players, setPlayers] = useState({})
  const [monsters, setMonsters] = useState({})

  useEffect(() => {
    const playersSub = players$.subscribe(setPlayers)
    const monstersSub = monsters$.subscribe(x => {
      console.log('should be re-rendering...')
      setMonsters(x)
    })

    return () => {
      playersSub.unsubscribe()
      monstersSub.unsubscribe()
    }
  }, [])

  return (
    <Section style={{ backgroundColor: medium, borderRadius: '.5rem', flex: '1 0 0' }}>
      {Object.entries(players).map(([key, x], i) => {
        if (!x.investigator) return <div key={key} />
        return <Player player={x} key={key} />
      })}
      {Object.entries(monsters).map(([key, x]) => {
        console.log('what is going on?')
        return <Monster monster={x} key={key} />
      })}
    </Section>
  )
}

Weirdly when I refresh the page it updates and shows the correct render for just a fraction of a second before it closes.

EDIT

Okay, I "fixed" it, but I'd still like to know what is causing the issue if anyone can shed some light on this problem for me.

The fix is just as bizarre as the problem to me, and I consider myself fairly familiar with React and RxJS.

I changed the subscription to this.

  useEffect(() => {
    const playersSub = players$.subscribe(setPlayers)
    const monstersSub = monsters$.subscribe(x => {
      setMonsters({ ...x })
    })

    return () => {
      playersSub.unsubscribe()
      monstersSub.unsubscribe()
    }
  }, [])

And now it works as intended. That doesn't seem like it should do anything.

about 4 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

React uses Object.is() equality (referential) to determine whether state has been updated. We should not directly mutate state, as if you're sending it the same reference, it just won't know.

You can either send an entirely new copy, as you did in your working version, or use the syntax that takes an updater function to set state from current state.

about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda