I have a parent component with specifies state using hooks and its watching the state change via the dependency array in useEffect of the parent, (also here watching the props change in the child)
When i change the parent state via the components do not re-render but the state has the new value saved
Im kinda puzzled to why is this happening, any ideas?
here are the parent/child components:
PARENT
import ScopeView from './ScopeView'
export default function ScopeController() {
const [selectedPhases, setSelectedPhases] = useState({})
.
.
function handleSelectedPhases(value) {
console.log(value, 'clicked phase')
setSelectedPhases(value)
}
useEffect(() => {
if (regions.length && !regionId) setRegionId(regions[0]?.id)
console.log(selectedPhases, 'useEffect')
}, [selectedPhases])
}
.
.
return (
<ScopeView
selectedPhases={selectedPhases}
onClick={value => handleSelectedPhases(value)}
/>
)
CHILD
import React, { useState, useEffect } from 'react'
export default function ScopeView({
selectedPhases,
onClick,
}) {
useEffect(() => {
console.log(selectedPhases, 'child useEffect trigger')
setSelectedCell(selectedPhases)
}, [selectedPhases])
return (
<>
<div style={{ width: '100%'
<div style={{ width: '100%' }}>
.
.
.
return (
<div className={cl.servicesRow} key={s.id}>
<ClickableButton
phases={phases}
serviceId={s.id}
selectedPhases={selectedPhases}
isPhasesService={isPhasesService}
phasesService={phasesService}
onClick={onClick}
/>
</div>
)
}
