React, render & console.log() displays different values when onInput event

Question

When i write in the input element, it triggers onInputChange() function, that updates inputValue state, then calls the getValue() that gets the inputValue state and log in console. The value that is rendered is not the same that is in console, what's happening here?

Reproducible example: https://stackblitz.com/edit/react-i4wprk?file=src%2FApp.js

import React from 'react';
import './style.css';

export default class App extends React.Component {
  constructor() {
    super();
    this.state = {
      inputValue: '',
    };
  }

  getValue = () => {
    const { inputValue } = this.state;
    console.log(inputValue);
  };

  onInputChange = (event) => {
    const inputValue = event.currentTarget.value;
    this.setState({ inputValue });
    this.getValue();
  };

  render() {
    const { inputValue } = this.state;

    return (
      <div>
        <input placeholder="texto" onInput={this.onInputChange} />
        <p>{inputValue}</p>
      </div>
    );
  }
}

It is because this.setState is asynchronous so when you do it and right after call this.getValue(), the data is not already set in the state — OneQ
– OneQ, Commented Jan 9, 2023 at 22:20
You can use the callback : this.setState({ inputValue }, () => this.getValue()); — OneQ
– OneQ, Commented Jan 9, 2023 at 22:24
Why does it matter what's logged in the console? Why are you even logging your state values? — Phil
– Phil, Commented Jan 9, 2023 at 22:32
@Phil this is just a reproducible example, i'm i'm debugging a code, the original function doesn't logs nothing in console. — sonEtLumiere
– sonEtLumiere, Commented Jan 9, 2023 at 22:33

jclayborn · Accepted Answer · 2023-01-10 14:24:29Z

1

setState is not a synchronous call so there is no guarantee that your console log will fire after the value has been updated in state. You can add a callback to setState

this.setState({inputValue}, () => {this.getValue()}

edited Jan 10, 2023 at 14:24

answered Jan 9, 2023 at 22:25

jclayborn

133 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Lin Du · Accepted Answer · 2023-07-14 07:05:25Z

0

setState(nextState, callback?)

setState() does not always immediately update the component. It may batch or defer the update until later. This makes reading this.state right after calling setState() a potential pitfall. Instead, use componentDidUpdate or a setState callback (setState(updater, callback)), either of which are guaranteed to fire after the update has been applied.

answered Jul 14, 2023 at 7:05

Lin Du

104k138 gold badges340 silver badges575 bronze badges

Collectives™ on Stack Overflow

React, render & console.log() displays different values when onInput event

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related