useState hook always 1 step behind - reactjs

Question

I have seen other questions with the exact same title, but none solved my problem:
This is my code:
import React, { useState } from 'react';
import Validation from './Validation/Validation';
import Char from './Char/Char';
function App() {
const [textState, textSetState] = useState('');
const [charsState, charsSetState] = useState([]);
let inputChange = (event) => {
textSetState(event.target.value);
charsSetState(event.target.value.split('').map((char, index) => {
return <Char char={char} key={index} click={() => { deleteCharHandler(index) }} />
}));
}
const deleteCharHandler = (index) => {
alert(textState);
}
return (
<div className="App">
<input type="text" onChange={(event) => inputChange(event)} />
<Validation text={textState} />
{charsState}
</div>
);
}
export default App;
This is the result:
When I click a character, it displays the value from 1 step behind, like the example above.

Answer 1

You're putting an array of rendered Char components in your state, then rendering it. There are a number of issues with this approach.
The local copy of the state (charsState) will not be updated immediately; instead React will re-render the component with the new value for state.
Since you are defining the onClick callback within the function, deleteCharHandler will always be referencing an outdated copy of the state.
Multiple state hooks being updated in lockstep in this way will cause additional re-renders to happen.
Since the naming in your example is a bit confusing it's hard to tell what the desired behavior is to make good recommendations for how to resolve or refactor.

Answer 2

So there are a few things which may or may not be causing an issue so lets just clear a few things up:
You don't need to pass the anonymous function on the input:
<input type="text" onChange={inputChange} /> should suffice
As with OG state, it's never a good idea to call two setStates simultaneously, so lets combine the two:
const [state, setState] = useState({text: '', char: []});
Once you've updated everything you should be setting one state object onClick.
Your Char object is using click instead of onClick? unless you are using that as a callback method i'd switch to:
return <Char char={char} key={index} OnClick={() => deleteCharHandler(index)} />
If that doesn't fix your solution at the end, you can simply pass the deleteCharHandler the updated text value instead of re-grabbing the state value

Answer 3

I think you need useCallback or to pass textState in parameter. the deleteCharHandler method doesn't change in time with the textState value.
try :
return <Char char={char} key={index} click={() => { deleteCharHandler(index, textState) }} />
...
const deleteCharHandler = (index, textState) => {
alert(textState);
}
or :
import React, { useState, useCallback } from 'react';
...
const deleteCharHandler = useCallback(
(index) => {
alert(textState);
}, [textState]);

Answer 4

Try this
function App() {
const [textState, textSetState] = useState('');
const inputChange = useCallback((event) => {
textSetState(event.target.value);
},[])
function renderChars(){
return textState.split('').map((char, index) => {
return <Char char={char} key={index} click={() => { deleteCharHandler(index) }} />
}));
}
const deleteCharHandler = useCallback( (index) => {
alert(textState);
}, [textState])
return (
<div className="App">
<input type="text" onChange={inputChange} />
<Validation text={textState} />
{renderChars()}
</div>
);
}