useContext not reading values on first refresh - reactjs

Question

export const LoginContext = React.createContext();
export const DetailsContext = React.createContext();
function App() {
const username = localStorage.getItem("bankDetails");
const [userDetails, setUserDetails] = useState({});
const [isValid, setisValid] = useState(false);
useEffect(() => {
if (username !== null) {
Axios.post("http://localhost:3001/userDetails", {
username: username,
}).then((res) => {
if (res.data.err) {
console.log("err");
} else {
setUserDetails(res.data.details[0]);
setisValid(true);
}
});
}
}, []);
return (
<LoginContext.Provider value={{ isValid, setisValid }}>
<DetailsContext.Provider value={{ userDetails, setUserDetails }}>
<Router>
<Routes>
<Route ... />
</Routes>
</Router>
</DetailsContext.Provider>
</LoginContext.Provider>
);
}
export default App;
Transactions.js
function Transactions() {
const { isValid } = useContext(LoginContext);
const { userDetails, setUserDetails } = useContext(DetailsContext);
const [allDetails, setAllDetails] = useState([]);
const [transactions, setTransactions] = useState([]);
useEffect(() => {
console.log(userDetails);
Axios.get("http://localhost:3001/transactTo").then((rest) => {
setAllDetails(rest.data);
});
// setTransactions(JSON.parse(userDetails.transactions));
}, [userDetails]);
return isValid ? <h1>Valid</h1> : <h1>Not Valid</h1>
}
export default Transactions;
The userDetails logs an empty object first and data object after re-render but after uncommenting the setTransactions(JSON.parse(userDetails.transactions)) part it only logs an empty object and then an error stating: Unexpected token u in JSON at position 0. It only happens on page refresh and not when I navigate from another page.
Also tried adding second effect but it didn't helped:
useEffect(() => {
setTransactions(JSON.parse(userDetails.transactions));
}, [allDetails]);

Answer 1

It is an empty object because API requests are asynchronous. It is a normal thing.
Unexpected token u in JSON at position 0 this means that userDetails.transactions isn't a json. It's probably undefined that's why u
useEffect(() => {
// try returning when the property is `undefined`
if (!userDetails.transations) return;
setTransactions(JSON.parse(userDetails.transactions));
}, [allDetails]);