useState not setting inital state with a filtered array

Question

I am pulling data using useContext into my component. I then want to filter tasks so it only shows the relevant tasks for the project.

I am filtering tasks into initState and then want to set the inital state using useState of this filtered list.

When I filter the list in initState I am getting the correct values however when I do this:

const [listToRender, setListToRender] = useState(initState)

listToRender is an empty array and there is no state within the component.

    const TasksTable = ({ match: { params: { projectId }} }) => {
    const { tasks } = useContext(TasksContext)
    const initState = [...tasks].filter(task => task.taskProject === projectId)
    const [listToRender, setListToRender] = useState(initState)

Does anyone know where I could be going wrong here?

Here is a console.log of the different values when the component first renders

Answer 1

I would use a useEffect to init the value of the listToRender state

 const TasksTable = ({ match: { params: { projectId }} }) => {
 const { tasks } = useContext(TasksContext)
 const [listToRender, setListToRender] = useState([])

React.useEffect(() => {
const initState = tasks?.filter(task => task.taskProject === projectId) ?? []
 setListToRender(initState)
}, [tasks, projectId]);

The reason is, that it may not have the task data when it's setting the listToRender state, leading it to be an empty array.

A useEffect will run every time the component gets an update, in this case, the useEffect will only run if the tasks changes, ( see the dependency array ). Therefore, when the tasks get a value, it will trigger the useEffect to update the listToRender state.

Answer 2

Do you need to update listToRender in the future by setListToRender()? if you're not then you can use useMemo instead:

const TasksTable = ({ match: { params: { projectId }} }) => {
  const { tasks } = useContext(TasksContext);
  
  const initState = useMemo(() => {
    return tasks.filter(task => task.taskProject === projectId);
  }, [projectId, tasks]);