Changing React state happens a re-render later, then it should

Question

I have a functional component managing several states, amongst other things a state, which stores the index, with which I am rendering a type of table, when clicking a suitable button. OnClick that button calls a callback function, which runs a click handler. That click handler changes the index state, to the same 'index' as the array entry, in which I store an object with information for the rendering of a child component.

I would expect, that onClick the state would change before the rendering happens, so the component could render correctly. Yet it only happens a render later.

I already tried calling the useEffect-hook, to re-render, when that index state changes, but that didn't help neither.

Here is a shortened version of the code:

export const someComponent = () => {
  [index, setIndex] = useState(-1);
   
  const handleClick = (id) => {
    setIndex(id);
  
    // This is a function, I use to render the table
    buildNewComponent(index);
  }
}

Further 'down' in the code, I got the function, which is rendering the table entries. There I pass the onClick prop in the child component of the table as following:

<SomeEntryComponent
  onClick={() => handleClick(arrayEntry.id)}
>
// some code which is not affecting my problem
</SomeEntryComponent>

So as told: when that onClick fires, it first renders the component when one presses it the second time, because first then the state changes.

Could anyone tell me why that happens like that and how I could fix it to work properly?

Answer 1

As other have stated, it is a synchronicity issue, where index is being updated after buildComponent has been invoked.

But from a design standpoint, it would be better to assert index existence by its value, as opposed to flagging it in a handler. I don't know the details behind buildComponent, but you can turn it into a conditional render of the component.

Your component rendering becomes derived from its data, as opposed to manual creation.

export const someComponent = () => {
    [index, setIndex] = useState(-1);

    const handleClick = (id) => setIndex(id);

    const indexHasBeenSelected = index !== -1
    return (
        <div>
            {indexHasBeenSelected && <NewComponent index={index} />}
        </div>
    )
}