I have had some issues with my props not updating correctly when they are destructorized in combination with useEffect dependencies. I now know how I can fix the issue but I do not understand why it happens.
The example below does not work properly and does not show changes when the props changes.
const Devices = ({ apis }) => {
const [ availableApis, _setAvailableApis ] = useState([])
const availableApisRef = useRef( availableApis )
const setAvailableApis = v => {
availableApisRef.current = v
_setAvailableApis( v )
}
useEffect(() => {
let availableApis = []
apis.forEach( v => {
console.log(v)
if( v.available === true )
{
availableApis.push( v )
}
})
console.log(availableApis)
setAvailableApis( availableApis )
}, [ apis ])
return <somecomponent key={v.name} />
}
If I replace const Devices = ({ apis }) => { with const Devices = props => {
and replace }, [ apis ]) with }, [ props ]) the changes are rendered.
I thought this would have the same effect, but it does not.
Note: This problem does not occur when useEffect effect is not used, but the variable is simply used in a component.
const ApiStatus = ({ available, apiName, openLogin }) => {
return (
<StatusContainer onClick={openLogin} available={available}>
<p> { apiName } - { available ? "Beschikbaar" : "Uitgelogd" } </p>
</StatusContainer>
)
}
If I replace
const Devices = ({ apis }) => {withconst Devices = props => {andreplace }, [ apis ])with}, [ props ])the changes are rendered.
Those are very different things. The first re-runs the effect when apis changes, ignoring any other changes. The second re-runs the effect any time props, the object, changes. (And I think you get a new object [though possibly with the same contents] on every render of the child component, so you probably don't want that.)
If you accept props rather than {apis}, the equivalent dependency array for useEffect is [props.apis].
Looking at the code of your effect, it looks like it depends on apis and not on other props, so it makes sense for the dependency array to be [apis] (or [props.apis] if you don't destructure).