I have this following code Parent and DataFilter.
Parent.js
const Parent = () => {
const [filteredData, setFilteredData] = useState()
...
const Filter = () => {
return (
<div>
<h2>Filter your data</h2>
<DataFilter data={filteredData} updateFilter={setFilteredData} />
<Result data={filteredData} />
</div>
)
}
return (
<div>
<h1>Header</h1>
<Filter />
</div>
)
}
DataFilter.js
const DataFilter = ({ data, updateFilter }) => {
const [name, setName] = useState(defaultFilters.name)
const [age, setAge] = useState(defaultFilters.age)
...(filter logic using data)
useEffect(() => {
updateFilter({ name, age })
}, [name, age])
}
Here, I receive Maximum update depth exceeded aka infinite rendering, which I kind of know why.
ParentandDataFilterget renderedDataFiltertriggersParent‘ssetFilteredDatainuseEffectParentgets rerendered because ofsetFilteredDataParentbeing rerendered triggers child componentDataFilterrerender- Repeat from No.2
But, this only started happening only after I extracted Filter in ‘Parent’ as an inner component… I know it’s weird but it was working fine when Parent was like this
const Parent = () => {
const [filteredData, setFilteredData] = useState()
...
return (
<div>
<h1>Header</h1>
<div>
<h2>Filter your data</h2>
<DataFilter data={filteredData} updateFilter={setFilteredData} />
<Result data={filteredData} />
</div>
</div>
)
}
Does anyone know why the infinite rendering happens only when it’s as an inner component?
I tried using useCallback for setFilteredData but it didn’t work.
Also what should I do to prevent the infinite render if I want to keep it as a component rather than directly writing everything in a return()?
