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 :)
Share Improve this question edited Feb 3, 2020 at 17:49 Vencovsky 31.7k22 gold badges130 silver badges197 bronze badges asked Feb 3, 2020 at 17:04 HarelHarel 5811 gold badge9 silver badges23 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
1 Answer
Reset to default 9addToChosenList
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
版权声明:本文标题:javascript - React - functional components keep re-render when passing functions as props - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742124375a2421869.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论