javascript - React - functional components keep re-render when passing functions as props - Stack Overflow

admin管理员组

文章数量:1323723

i have an issue in my react app and i dont know how to solve it;

i have an array with values and chosen list and a function to add item to the chosen list

import React, { useState } from "react";
import Parent from "./Parent";
export default function App() {
  const [chosenList, setChosenList] = useState([]);
  const array = ["dsadas", "dasdas", "dasdasd"];

  const addToChosenList = string => {
    setChosenList([...chosenList, string]);
  };

  return (
    <div className="App">
      <Parent
        arr={array}
        chosenList={chosenList}
        addToChosenList={addToChosenList}
      />
    </div>
  );
}

Parent ponent that mapping through the array and give the Nested ponent the props: item, addToChosenList, inList

import React from "react";
import Nested from "./Nested.js";

export default function Parent({ arr, addToChosenList, chosenList }) {
  return (
    <div className="App">
      {arr.map((item, index) => (
        <Nested
          key={index}
          item={item}
          addToChosenList={addToChosenList}
          inList={chosenList.findIndex(listitem => listitem === item) > -1}
        />
      ))}
    </div>
  );
}

Nested ponent that displays the item and giving it the addToChosenList function to add the item to the chosen list

import React, { memo } from "react";
export default memo(function Parent({ item, addToChosenList, inList }) {
  const childFunctionToAddToChosenList = () => {
    addToChosenList(item);
  };
  return (
    <div className="App" onClick={childFunctionToAddToChosenList}>
      <div>{item}</div>
      {inList && <div>in List</div>}
    </div>
  );
});

every Nested ponent keeps re-render after i clicked only one item in the list i believe it renders because of the function addToChosenList that changes when i change the state

anyone knows how to solve it ??

thanks :)

i have an issue in my react app and i dont know how to solve it;

i have an array with values and chosen list and a function to add item to the chosen list

import React, { useState } from "react";
import Parent from "./Parent";
export default function App() {
  const [chosenList, setChosenList] = useState([]);
  const array = ["dsadas", "dasdas", "dasdasd"];

  const addToChosenList = string => {
    setChosenList([...chosenList, string]);
  };

  return (
    <div className="App">
      <Parent
        arr={array}
        chosenList={chosenList}
        addToChosenList={addToChosenList}
      />
    </div>
  );
}

Parent ponent that mapping through the array and give the Nested ponent the props: item, addToChosenList, inList

import React from "react";
import Nested from "./Nested.js";

export default function Parent({ arr, addToChosenList, chosenList }) {
  return (
    <div className="App">
      {arr.map((item, index) => (
        <Nested
          key={index}
          item={item}
          addToChosenList={addToChosenList}
          inList={chosenList.findIndex(listitem => listitem === item) > -1}
        />
      ))}
    </div>
  );
}

Nested ponent that displays the item and giving it the addToChosenList function to add the item to the chosen list

import React, { memo } from "react";
export default memo(function Parent({ item, addToChosenList, inList }) {
  const childFunctionToAddToChosenList = () => {
    addToChosenList(item);
  };
  return (
    <div className="App" onClick={childFunctionToAddToChosenList}>
      <div>{item}</div>
      {inList && <div>in List</div>}
    </div>
  );
});

every Nested ponent keeps re-render after i clicked only one item in the list i believe it renders because of the function addToChosenList that changes when i change the state

anyone knows how to solve it ??

thanks :)

• javascript
• reactjs
• react-hooks

Share Improve this question Follow edited Feb 3, 2020 at 17:49 Vencovsky 31.7k2222 gold badges130130 silver badges197197 bronze badges asked Feb 3, 2020 at 17:04 HarelHarel 58111 gold badge99 silver badges2323 bronze badges 3

• It is expected behaviour. When state of a Component is changed, all it's children (and sub-children) will be rerendered – jimmy5312 Commented Feb 3, 2020 at 17:09
• But I’m using memo – Harel Commented Feb 3, 2020 at 17:11
• Ok, didn't see the memo part. Perhaps you can try pass "setChosenList" into Nested and perform the "setChosenList([...chosenList, string]);" inside Nested ? – jimmy5312 Commented Feb 3, 2020 at 17:19

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 9

addToChosenList will point to a new reference on every re-render, wrap it in useCallback which will keep the same reference across re-renders unless one of the variables inside of the dependencies array has changed, if we pass an empty array the function will keep the same reference across the entire ponent lifecycle.

you will also need to use a functional update to avoid stale state due to the closure

const addToChosenList = useCallback(string => {
  setChosenList(prevState => [...prevState, string]);
}, []);

本文标签： javascriptReactfunctional components keep rerender when passing functions as propsStack Overflow