Como evitar a renderização de componentes filhos no pai em reação

Cada vez que o componente é montado ou desmontado (usando renderização condicional) - o estado do componente é redefinido para os valores padrão. Então esse é o seu problema, e useMemoo hook não irá ajudá-lo aqui.

Para resolver seu problema, você pode modificar seus arquivos CSS raiz e adicionar algo como .hiddenclass:

.hidden {
  display: none;
}

Muito provavelmente você já possui esse tipo de classe utilitária em seu projeto. Como d-nonepara bootstrap ou similar.

Em seguida - você precisa adicionar um wrapper ao seu DropDowncomponente ou alterar o tipo de nó raiz retornado por este componente para algo diferente de React.Fragmentie <> </>e aplicar condicional classNamea ele assim:

className={hide ? 'hidden' : ''}

Aqui está um exemplo da solução:

import React, { useState } from 'react';

function DropDown({ className }) {
  const [number, setNumber] = useState(0);
  return (
    <div className={className}>
      <button onClick={() => setNumber(number + 1)}>+</button>
      <div>Child Component: {number}</div>
    </div>
  );
}

export const App = () => {
  const [hide, setHide] = useState(false);

  const toggleChildRendering = () => {
    setHide(!hide);
  };

  return (
    <div>
      <button onClick={toggleChildRendering}>Toggle Child Rendering</button>
      <DropDown className={hide ? 'hidden' : ''} />
    </div>
  );
};

Demonstração Stackblitz

O principal problema da sua abordagem é que você está usando useMemoda maneira errada. useMemoarmazena em cache um valor calculado (neste caso, um componente) e só recalculará esse valor se uma de suas dependências for alterada. Você deve usar useMemopara decidir se renderiza ou não o DropDowncomponente e, como dependência para essa decisão, use hide.

Aqui está uma solução mais detalhada:

Componente pai: usaremos hidecomo estado para determinar se devemos mostrar ao filho. Usaremos useMemopara armazenar em cache o componente filho. Se hidemudar, ele irá recalcular se deve mostrar o componente filho.

import React, { useState, useMemo } from 'react';
import DropDown from './DropDown';

function App() {
  const [hide, setHide] = useState(false);

  const toggleChildRendering = () => {
    setHide(!hide);
  };

  const MemoizedDropDown = useMemo(() => {
    return !hide ? <DropDown /> : null;
  }, [hide]);

  return (
    <div>
      <button onClick={toggleChildRendering}>
        Toggle Child Rendering
      </button>
      {MemoizedDropDown}
    </div>
  );
}

export default App;

Componente filho: permanece o mesmo. Simplesmente mostra um botão para incrementar um contador.

import React, { useState } from "react";

export default function DropDown() {
  const [number, setNumber] = useState(0);
  return (
    <>
      <button onClick={() => setNumber(number + 1)}>+</button>
      <div>Child Component: {number}</div>
    </>
  );
}

Seguindo esta abordagem, você pode mostrar/ocultar o componente filho sem que ele perca seu estado interno. Entretanto, observe que se o componente filho for desmontado (ou seja, completamente removido do DOM) e depois remontado, seu estado interno será redefinido. Se quiser persistir o estado mesmo que o componente esteja desmontado, você precisará de uma solução mais complexa, como usar contexto ou mover o estado para o componente pai e passá-lo como acessórios.

A solução simples para isto é Elevar o Estado .

1. Basicamente, se você estiver ocultando um componente com a condição !hide ? <DropDown /> : null, ele será desmontado quando hidefor verdadeiro.
2. Agora, quando você estiver armazenando o numberestado da criança, ele também desaparecerá.
3. Então, se você armazenar o numbervalor no estado pai, ele persistirá.
4. Agora, se o componente filho for desmontado devido ao hidesinalizador ser verdadeiro, você ainda terá o estado salvo em parent .
5. Dessa forma, você pode ocultar/mostrar o componente filho e o estado será preservado.
6. Eu não sugeriria que você ocultasse o componente com CSS. Mas se for um caso de uso especial para você, basta usar o hidesinalizador para definir o estilo do componente filho paradisplay: none

<Estilo suspenso={{ display: ocultar? 'nenhum' : 'bloquear' }} ... />

O caminho certo:

Aplicativo.js

function App() {
  const [number, setNumber] = useState(0);
  const [hide, setHide] = useState(false);
  ...
  return (
    ...
    <Dropdown number={number} changeNumber={setNumber} />
  )
}

Lista suspensa.js

export default function DropDown({number, changeNumber}) {
  return (
    <>
      <button onClick={() => changeNumber(number + 1)}>+</button>
      <div>Child Component{number}</div>
    </>
  );
}