It never happened to me befere and I don't know why is this happening.
I have these two components that create a infinite loop in the useEffect of the children component:
function Container(){
return <div> <Description /> </div>
}
// If I remove "= []" part no infinite loop is created
function Description({list = []}){
const [dict, setDict] = useState({})
useEffect(() => {
console.log('this is for the inifinite loop log')
setDict({}) // also, If a remove this line no infinite loop is created
}, [list])
return <div>something...</div>
}
** EDITED: this code is just the simplification of my problem **
I understand that the default array is created with a different memory pointer every time the component is re-render but then there is no way to put a list as a default prop and at the same time using it as a useEffect param?
When the state of the function component of React changes, the function is called again. And when the state of the function component changes, if the dependence array of useEffect also changes, the callback in useEffect is called.
When setDict is called in the above code, a new instance of the array, which is the default value to be put in the list, is created every time, so useEffect update callback continues to be called.
So you can use an empty array as the default by using the same array of instances.
const emptyArray = [];
// If I remove "= []" part no infinite loop is created
function Description({list = emptyArray}){
const [dict, setDict] = useState({})
useEffect(() => {
console.log('this is for the inifinite loop log')
setDict({}) // also, If a remove this line no infinite loop is created
}, [list])
return <div>something...</div>
}
I don't know what the final purpose you want just by looking at the example code above. I think your code creates a parameter of setDict by processing the list from your parent component. In general, I think that the parent of Description sends only the array or empty array value to the list prop. If so, I think it's a better way to cause an error when the array does not come in without supporting the empty array, which is the default of the list.
That's most likely because the list array is not the same object in memory, and new array is created each render.
If you have a default {} in your setDict, you do not need to re-assign it in your useEffect.
This may also be due to you not passing in list as a prop in your Container function through the Description component. If you pass that prop through you should alleviate the infinite loop that way as well.