Why is there an old state value in the function?

Question

React

Hello.

There is a react component on hooks
In which data is taken from the editor, modified and forwarded to the child component.

On click, the child component makes a request and updates the redux data (those that change in the parent and are displayed in the current one), which implies that it should be redrawn.

so sometimes in the child component there is obsolete data in the onClick function,
i.e. for example, in the editor, the length of filteredData is already longer and the parent knows about it, but in the child in the onClick function callback, the old value, as if React did not update the

pseudocode

//родительский компонент
const [filteredData, setFilteredData] = useState([])
const data = useSelector(state=> state.data)
useEffect(() => {
  setFilteredData(data.filer(condition))
}, [data])

const onChildComponentClick = () => {
  alert(filteredData.length)
}

//конец

//дочерний компонент
{filteredData, onChildComponentClick} = props

return(<>
  <div onClick={onChildComponentClick}></div>
  <div>
     filteredData.map((number) => <p onClick={fetchDataAndSaveInReduxForParent}>{number}</p>)
  </div>
</>)
//конец

Answer 1

Hang some unique one on the div key.