React: por que o componente filho não é atualizado quando o prop muda

Por que no exemplo de pseudo-código a seguir o Child não é renderizado novamente quando o Container altera foo.bar?

Container {
  handleEvent() {
    this.props.foo.bar = 123
  },

  render() {
    return <Child bar={this.props.foo.bar} />
}

Child {
  render() {
    return <div>{this.props.bar}</div>
  }
}

Mesmo se eu ligar forceUpdate()depois de modificar o valor em Container, Child ainda mostra o valor antigo.

Atualize filho para ter o atributo 'chave' igual ao nome. O componente será renderizado novamente sempre que a chave for alterada.

Child {
  render() {
    return <div key={this.props.bar}>{this.props.bar}</div>
  }
}

Porque os filhos não são renderizados novamente se os objetos do pai mudarem, mas se o seu ESTADO mudar :)

O que você está mostrando é o seguinte: https://facebook.github.io/react/tips/communicate-between-components.html

Ele transmitirá dados de pai para filho através de adereços, mas não há lógica de renderização lá.

Você precisa definir algum estado para o pai e renderizar novamente o filho no estado de mudança pai. Isso poderia ajudar. https://facebook.github.io/react/tips/expose-component-functions.html

Eu tive o mesmo problema. Esta é a minha solução, não tenho certeza de que seja uma boa prática, diga-me se não:

state = {
  value: this.props.value
};

componentDidUpdate(prevProps) {
  if(prevProps.value !== this.props.value) {
    this.setState({value: this.props.value});
  }
}

UPD: Agora você pode fazer o mesmo usando React Hooks: (somente se o componente for uma função)

const [value, setValue] = useState(propName);
// This will launch only if propName value has chaged.
useEffect(() => { setValue(propName) }, [propName]);

De acordo com a filosofia React, o componente não pode mudar seus props. eles devem ser recebidos dos pais e devem ser imutáveis. Somente os pais podem mudar os adereços de seus filhos.

boa explicação sobre estado vs adereços

Além disso, leia este tópico Por que não consigo atualizar os adereços no react.js?

Você deve usar a setStatefunção Caso contrário, o estado não salvará sua alteração, não importa como você use o forceUpdate.

Container {
    handleEvent= () => { // use arrow function
        //this.props.foo.bar = 123
        //You should use setState to set value like this:
        this.setState({foo: {bar: 123}});
    };

    render() {
        return <Child bar={this.state.foo.bar} />
    }
    Child {
        render() {
            return <div>{this.props.bar}</div>
        }
    }
}

Seu código parece inválido. Não consigo testar esse código.

Quando criar componentes do React a partir de functionse useState.

const [drawerState, setDrawerState] = useState(false);

const toggleDrawer = () => {
      // attempting to trigger re-render
      setDrawerState(!drawerState);
};

Isso não funciona

         <Drawer
            drawerState={drawerState}
            toggleDrawer={toggleDrawer}
         />

Isso funciona (adicionando chave)

         <Drawer
            drawerState={drawerState}
            key={drawerState}
            toggleDrawer={toggleDrawer}
         />

Confirmado, adicionar uma chave funciona. Analisei os documentos para tentar entender o porquê.

O React quer ser eficiente ao criar componentes filhos. Ele não renderizará um novo componente se for igual a outro filho, o que torna a página carregada mais rapidamente.

A adição de uma chave força o React para renderizar um novo componente, redefinindo o estado desse novo componente.

https://reactjs.org/docs/reconciliation.html#recursing-on-children

Use a função setState. Então você poderia fazer

       this.setState({this.state.foo.bar:123}) 

dentro do método de evento handle.

Uma vez atualizado, o estado acionará as alterações e a re-renderização ocorrerá.

Você provavelmente deve tornar o Child como componente funcional se ele não mantiver nenhum estado e simplesmente renderizar os objetos e depois chamá-lo do pai. Uma alternativa para isso é que você pode usar ganchos com o componente funcional (useState), que fará com que o componente sem estado seja renderizado novamente.

Além disso, você não deve alterar os propas, pois eles são imutáveis. Mantenha o estado do componente.

Child = ({bar}) => (bar);

Eu estava encontrando o mesmo problema. Eu tinha um Tooltipcomponente que estava recebendo showTooltipprop, que estava atualizando no Parentcomponente com base em uma ifcondição, estava sendo atualizado no Parentcomponente, mas o Tooltipcomponente não estava sendo renderizado.

const Parent = () => {
   let showTooltip = false;
   if(....){ showTooltip = true; }
   return(
      <Tooltip showTooltip={showTooltip}></Tooltip>
   )
}

O erro que eu estava cometendo é declarar showTooltipuma permissão.

Percebi que o que estava fazendo de errado estava violando os princípios de como a renderização funciona. Substituí-la por ganchos fez o trabalho.

const [showTooltip, setShowTooltip] =  React.useState<boolean>(false);

defina adereços alterados em mapStateToProps do método connect no componente filho.

function mapStateToProps(state) {
  return {
    chanelList: state.messaging.chanelList,
  };
}

export default connect(mapStateToProps)(ChannelItem);

No meu caso, o canal de channelList é atualizado, então eu adicionei chanelList em mapStateToProps