CODEWITHSUNDEEP
javascriptreactjsreact-hooksstateuse-effect
controlol
controlol

Reputation: 88

Why is React useeffect not updated when props are destructured

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>
  )
}

Upvotes: 0

Views: 708

Answers (1)

T.J. Crowder
T.J. Crowder

Reputation: 1074475

If I replace const Devices = ({ apis }) => { with const Devices = props => { and replace }, [ 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).

Upvotes: 1

Related Questions