Random Component Behavior - reactjs

Question

I have 2 components, the problem is that on the first submit click i cant setUser(), (although addUser arguments are giving the correct values) it keeps the original state '', '', but if i click it again it change correctly. I don't know what I'm doing wrong, its my first question sorry if its poorly formatted.
import React, { useState, useEffect } from "react";
import "./notes.css";
import UserNameMailForm from "./userNameMailForm";
const NoteApp = props => {
const [user, setUser] = useState({
userName: "",
email: ""
});
const addUser = (userName, email) => {
const newUser = { userName, email };
setUser(newUser);
console.log(user);
console.log(userName, email);
};
return (
<div className="container p-0">
<div className="screen pt-2">
<p>Users</p>
</div>
<UserNameMailForm addUser={addUser} />
</div>
);
};
export default NoteApp;
The second component is this one:
import React, { useState, useEffect } from "react";
const UserNameMailForm = ({ addUser }) => {
const [userName, setUsername] = useState("");
const [email, setEmail] = useState("");
useEffect(() => {}, []);
const handleSubmit = e => {
e.preventDefault();
addUser(userName, email);
};
return (
<form onSubmit={handleSubmit} className="form-group">
<input
type="text"
className="form-control"
placeholder="User name"
value={userName}
onChange={e => setUsername(e.currentTarget.value)}
/>
<input
type="text"
className="form-control"
placeholder="email"
value={email}
onChange={e => setEmail(e.currentTarget.value)}
/>
<button type="submit" className="btn btn-outline-danger">
Add
</button>
</form>
);
};
export default UserNameMailForm;

Answer 1

You code is working fine, as this example demonstrates:
const { useState } = React;
const NoteApp = props => {
const [user, setUser] = useState({
userName: "",
email: ""
});
const addUser = (userName, email) => {
const newUser = { userName, email };
setUser(newUser);
};
return (
<div className="container p-0">
<div className="screen pt-2">
<p>Users</p>
{JSON.stringify(user)}
</div>
<UserNameMailForm addUser={addUser} />
</div>
);
};
const UserNameMailForm = ({ addUser }) => {
const [userName, setUsername] = useState("");
const [email, setEmail] = useState("");
const handleSubmit = e => {
e.preventDefault();
addUser(userName, email);
};
return (
<form onSubmit={handleSubmit} className="form-group">
<input
type="text"
className="form-control"
placeholder="User name"
value={userName}
onChange={e => setUsername(e.currentTarget.value)}
/>
<input
type="text"
className="form-control"
placeholder="email"
value={email}
onChange={e => setEmail(e.currentTarget.value)}
/>
<button type="submit" className="btn btn-outline-danger">
Add
</button>
</form>
);
};
ReactDOM.render(<NoteApp />, document.getElementById("root"));
<script src="https://unpkg.com/react#16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom#16/umd/react-dom.development.js"></script>
<div id="root"></div>
The issue is that setUser is asynchronous, and user is a reference to the previous user object, which will be the object you pass as initial value to useState, so that's why console.log(user); is giving you the previous state.