score:1

Accepted answer

i would break your useeffect to two since they handle different parts of your code, one to dispatch a fetch and the other to massage the data when received.

// this will dispatch the listcontractors action when the userinfo changes
useeffect(() => {
  if (userinfo) {
    dispatch(listcontractors())
  } else {
    history.push('/login')
  }
}, [userinfo, history])

// this will update the data when contractors is changed
useeffect(() => {
  if (contractors) {
    const transformedcontractors = contractors.map(contractor => ({
      ...contractor, // used this to avoid the one-by-one hand written copy.
      action: <link classname='text-dark text-center' to={`/contractor/${c._id}`}><morehorizontal /></link>
    }));
    setdata(transformedcontractors);
  }
}, [contractors]);

Related Query

More Query from same tag