Início / coding / Perguntas / 77709966
Accepted
ABGR
Asked: 2023-12-24 15:47:01 +0800 CST

ChildComponent ainda é renderizado novamente apesar de usar useCallBack

  • 772

Eu tenho App.js que se parece com isto:

import ChildComponent from "./ChildComponent";
import { useState, useMemo, useCallback } from "react";

export default function App() {
  const [pageTitle, setPageTitle] = useState("");
  const [anotherProp, setAnotherProp] = useState(1);

  const handleInputChange = useCallback(
    (e) => {
      setPageTitle(e.target.value);
    },
    [pageTitle]
  );

  const handleIncrement = useCallback(() => {
    setAnotherProp(anotherProp + 1);
  }, [anotherProp]);

  return (
    <div className="App">
      <ChildComponent title={pageTitle} handleInputChange={handleInputChange} />

      <div>
        {anotherProp}
        <input
          type={"button"}
          value={"Increment Count"}
          onClick={handleIncrement}
        />
      </div>
    </div>
  );
}

O componente filho se parece com isto:


function ChildComponent({ title, handleInputChange }) {
  console.log("Child Component renders");
  return (
    <>
      <input type="text" onChange={handleInputChange} />
      <h1>{title}</h1>
    </>
  );
}

export default ChildComponent;

Desde que usei, useCallBackespero que, ao clicar no botão para aumentar a contagem, meu componente filho permaneça inalterado e não seja renderizado novamente. Mas meu componente filho ainda é renderizado novamente.

Você pode me ajudar a entender por quê?

javascript

4 respostas

  1. Best Answer

    Esse é o comportamento padrão do React. Ele renderizará novamente seus filhos quando o componente pai for renderizado novamente, mesmo que os adereços do filho não tenham mudado. Nesse caso, seu pai está renderizando novamente à medida que seu estado é atualizado (o anotherPropcontador).

    Se você quiser evitar que um componente específico seja renderizado novamente quando seus adereços permanecerem inalterados, você pode usar React.memo()envolvendo-o ChildComponentnele, por exemplo:

    export default memo(ChildComponent);

    Com isso, o React não renderizará novamente ChildComponentquando seus adereços permanecerem inalterados.

    Por outro lado, a [pageTitle]dependência do seu primeiro useCallback()gancho é desnecessária e pode ser apenas []porque o seu retorno de chamada não usa esse valor de estado dentro dele.

    • 1

  2. Outra versão da resposta. Combinação de useCallback e useMemo

    Aplicativo.js

    import React, { useState, useCallback, useMemo } from 'react';
import { render } from 'react-dom';
import Child from './components/child.js';

function App() {
  const [num, setNum] = useState(0);

  const handleUpdateNum = useCallback((num) => {
    setNum(num + 1);
  }, []);

  const getChildComp = useMemo(
    () => <Child handleUpdateNum={handleUpdateNum} />,
    [handleUpdateNum]
  );

  return (
    <div>
      <h1>{num}</h1>
      {getChildComp}
      <button onClick={() => handleUpdateNum(num)}> Addition </button>
    </div>
  );
}

    Criança.js

    import React from 'react';
function Child() {
  console.log('child component rendered');

  return (
    <div>
      <h1>Hello World</h1>
    </div>
  );
}
export default Child;

    Espero que isto ajude.

    • 0

  3. O problema está na matriz de dependência em useCallback para handleInputChange. Você tem pageTitle como uma dependência, o que faz com que a função handleInputChange seja recriada sempre que pageTitle for alterado. Portanto, remova pageTitle da matriz de dependências para evitar recriações desnecessárias e deve funcionar conforme o esperado.

    • 0 
  4. Wrapp your child component in memo, imported from react,  export default memo(ChildComponent);
    • 0

relate perguntas