useState hook always 1 step behind

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.

Does this answer your question? [React setState not updating state](https://stackoverflow.com/questions/41446560/react-setstate-not-updating-state) — Brian Ogden, Dec 17 '19 at 22:49
React state is asynchronous the value of textState has not yet updated to the new value when you alert — Brian Ogden, Dec 17 '19 at 22:50
@BrianOgden Hello. No, because I need to delete a character when I click it, so adding a callback for when I change the state will not do the job. — rafael.js, Dec 17 '19 at 22:56
is your goal to render text from input as sequence of `` and later delete some char after being clicked? — skyboyer, Dec 17 '19 at 23:01
@AsafAviv to re-render the components everytime I change the text — rafael.js, Dec 17 '19 at 23:06
When you update the text the component is going to re-render, then just map over the text inside the JSX and render the `Char` components. when you want to remove a char just update the text state — Asaf Aviv, Dec 17 '19 at 23:07
One more thing: When I changed it to a class component, it worked as intended. — rafael.js, Dec 17 '19 at 23:09
sure, because for class-based component you are accessing most recent `state` by reference `this.state`. While in functional components you are typically facing closure(and stale data in closure is reason you face this issue above) — skyboyer, Dec 17 '19 at 23:11
This seems like a perfectly acceptable question, not sure why thumbs down? — Chris, Oct 25 '21 at 21:08

score 3 · Accepted Answer · answered Dec 17 '19 at 22:58

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.

score 2 · Answer 2 · answered Dec 17 '19 at 22:57

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

answered Dec 17 '19 at 22:57

theFlyingCoder

109
5

1. How will I access the value of the input? 2. I'll try it out 3. I use onClick on the component, I pass the function via prop.click – rafael.js Dec 17 '19 at 22:59
1

The onClick event will automatically pass through the event object as you aren't altering it. – theFlyingCoder Dec 17 '19 at 23:09
No worries! Glad to help, although someone else just came in after with pretty much the same answer XD rip – theFlyingCoder Dec 17 '19 at 23:38

score 1 · Answer 3 · answered Dec 17 '19 at 22:56

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]);

score 1 · Answer 4 · answered Dec 17 '19 at 23:18

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>
   );
}

useState hook always 1 step behind

4 Answers4