当 object 已加载从 API 更新时，重新渲染 UseEffect 的最佳方法

Question

I was wondering what the best practice for handling this situation is.

Currently I am getting data back from an api in this format:

department: { 
    workers: {}
}

The workers field gets populated with a bunch of key:value pairs in the format like this:

workers: {
   workerId: {...},
   workerId: {...},
   workerId: {...}
  .... and so on (workerId is a unique Id and will have data on the worker)
}

function Department(props){
     const {workers} = useSelector(({company}) => company.department)

     useEffect(() => {

        This is where I am wondering what I need to do.

        "workers" is initially = {}. But when it eventually gets populated with 
        the many "workerId" properties, there is no re-render.

     }, [workers])

}

Answer 1

This happens because React can't predict the Value Changed inside the particular object(workers) in terms of its key value pairs. Objects are always shallow compared to their previous state and the address of the object remains same even when object was {} or loaded with data from API.

When using workers object as a dependency array in useEffect hook, It does not detects change in its data as the address of the workers object remains same and it takes it same as the previous state and hence the component does not re-renders.

The only way to cause a re-render is to set state. Mutating an object during a useEffect will not cause a re-render. So you could fix this by adding a state variable, and then setting state once you've received the data from API.