Setting loader return as initial state

[jotaachm]

Hey!

I have a screen with this loader attached:

export async function iterationRolesLoader({ params }) {
    const { id } = params
    try {
        const roles = await axios.get(`/manager/itrs/${id}/fetch_itr_roles`)
        return roles.data;
    } catch (error) {
        console.log(error)
        return error;
    }
}

Imagine I have the two lines below:

const { itr_roles, roles } = useLoaderData();
  const [selectedRoles, setSelectedRoles] = useState(Object.keys(itr_roles));

My loader returns an object of two objects, itr_roles and roles. I want selected roles to be an array with the keys of itr_roles. However, itr_roles is initially undefined until the loader finishes so it doesn't seem like I can set the initial state like that. What is the optimal way to go about taking data from the loader and setting some state to handle it? I am thinking of doing something like this

  useEffect(() => {
    const [selectedRoles, setSelectedRoles] = useState([]);
    // Update the selected roles state once itr_roles are available
    if (itr_roles) {
      setSelectedRoles(Object.keys(itr_roles));
    }
  }, [itr_roles]);

However, I am not sure that is the way to go about it, and would appreciate any feedback or guidance. Thanks!

[brophdawg11]

Components don't render until the loaders have completed so it should be defined initially. If you're not seeing this could you provide a simplified reproeduction?