what is the problem in this is setState is not working? - reactjs

Question

class Usurvey extends Component {
constructor(props) {
super(props);
this.nameRef = React.createRef();}
state={
uid:uuid.v1(),
studentName:'',
isSubmitted:false
}
nameSubmit=(e)=>{
let studName=this.nameRef.current.value;
console.log(studName);
this.setState({studentName:studName});
console.log(this.state);
}
render() {
let studentName;
if(this.state.studentName===''&&this.state.isSubmitted===false){
studentName=<div>
<h1>hey student pls let us know your name </h1>
<form onSubmit={this.nameSubmit}>
<input type='text' placeholder="name pls " ref={this.nameRef} className="namy" />
</form></div>}
return (
<div>
{studentName}
-------------------------------
{questions}
</div>
);
}
}
export default Usurvey;
see in this my question is that in namesubmit function when the form is submitted it should update the value of the state.studentName to the input given by the user and then log it on the console
and it is not working in above code but if i change the namsubmit function then it is working why ? pls explain
this is the new code
nameSubmit=(e)=>{
let studName=this.nameRef.current.value;
console.log(studName);
this.setState({studentName:studName},()=>{
console.log(this.state);
});
}

Answer 1

setState is async call. By doing like so-
this.setState({studentName:studName});
console.log(this.state)
State indeed gonna change in next render, but you are logging it before it happen.
At your new code
nameSubmit=(e)=>{
let studName=this.nameRef.current.value;
console.log(studName);
this.setState({studentName:studName},()=>{
console.log(this.state);
});
}
You set the log function as a callback, what gonna be executed only after setState finished it job

Answer 2

setState works asynchronously so the state of your component is not guaranteed to be updated right after the setState call. In your second snippet of code you provide the second argument as a callback function which is called after the state update so you can be sure the state is up-to-date when you log it into the console

Answer 3

setState is asynchronous, meaning the state might not be yet set by the time the next line is executed.
By using
this.setState({studentName:studName},()=>{
console.log(this.state);
});
You are defining a callback function and passing it to setState
()=> {
console.log(this.state);
});
setState will then, change the state, and only once it's done (which could be after nameSubmit is finished, it will execute your callback function, guarantying that the state is up to date on it.

Answer 4

I don't know what exactly is your coding doing but there is no questions variable defined in your code. So here is the full code:
import React from "react";
import { v1 } from "uuid";
export default class App extends React.Component {
constructor(props) {
super(props);
this.nameRef = React.createRef();
}
state = {
uid: v1(),
studentName: "",
isSubmitted: false
};
nameSubmit = e => {
let studName = this.nameRef.current.value;
this.setState({ studentName: studName }, () => {
console.log(this.state);
});
};
render() {
let studentName;
if (this.state.studentName === "" && this.state.isSubmitted === false) {
return (
<div>
<h1>hey student pls let us know your name </h1>
<form onSubmit={this.nameSubmit}>
<input type="text"
placeholder="name pls "
ref={this.nameRef}
className="namy"
/>
<button type="submit">Submit</button>
</form>
</div>
);
} else {
return <div>{this.state.studentName}</div>;
}
}
}