We Keep Coding

React - Cannot access fetched data outside useEffect hook

I am trying to fetch data from a NodeJS server I created in React using the useEffect hook and the fetch API. the problem is I cannot access this data outside the useEffect callbacks
This is my code:
import React, { useEffect, useState } from "react";
const App = () => {
const [LCS_Data, setLCSData] = useState({});
useEffect(() => {
fetch("http://localhost:5000/lcs")
.then((response) => {
return response.json();
})
.then((data) => {
console.log(data);
console.log(data.LCS.info);
setLCSData(data);
});
}, []);
// console.log(LCS_Data.LCS.info);
return <div className="main"></div>;
};
export default App;
and this the output of the two console.logs in the useEffect: output of first console.log in the broswer
So everything is working fine, the data is structured as it should be and it is not corrupted in any way
that is until I uncomment the console.log before the return statement
it throws of this error
TypeError: Cannot read properties of undefined (reading 'info')
pointing at the last console.log when clearly the data is there.
How can I access properties inside my data object outside the scope of the useEffect hook so I can normally use it in my app

In the first render, LCS_Data has the value you provided in your useState ({}). useEffect only runs after your render, so when we reach your console.log, accessing .LCS.info from {} gives an error. Only after a rerender triggered by setLCSData(data) when the fetch call returns will LCS_Data be the value returned from the API. So in this scenario, you can either:
Pass a default value like { LCS: { info: 'default info' } } to useState so that before the useEffect runs and the fetch call returns, you have a value for LCS_Data.LCS.info to be printed out.
Use optional chaining (LCS_Data.LCS?.info) to print out undefined if there is no value yet.
Note that this is how it should work: you will not have the value from the server until the useEffect fires and the fetch call returns. What you should do is to provide a default value before this happens.

How to stop executing a command the contains useState?

This is my code which sends a GET request to my backend (mySQL) and gets the data. I am using useState to extract and set the response.data .
const baseURL = 'http://localhost:5000/api/user/timesheet/13009';
const [DataArray , setDataArray] = useState([]);
axios.get(baseURL).then( (response)=>{
setDataArray(response.data);
});
But useState keeps on sending the GET request to my server and I only want to resend the GET request and re-render when I click a button or execute another function.
Server Terminal Console
Is there a better way to store response.data and if not how can I stop automatic re-rendering of useState and make it so that it re-renders only when I want to.

As pointed out in the comments, your setState call is triggering a re-render which in turn is making another axios call, effectively creating an endless loop.
There are several ways to solve this. You could, for example, use one of the many libraries built for query management with react hooks, such as react-query. But the most straightforward approach would be to employ useEffect to wrap your querying.
BTW, you should also take constants such as the baseUrl out of the component, that way you won’t need to include them as dependencies to the effect.
const baseURL = 'http://localhost:5000/api/user/timesheet/13009';
const Component = () => {
const [dataArray , setDataArray] = useState([]);
useEffect(() => {
axios.get(baseURL).then( (response)=>{
setDataArray(response.data);
});
}, []);
// your return code
}
This would only run the query on first load.

you have to wrap your request into a useEffect.
const baseURL = 'http://localhost:5000/api/user/timesheet/13009';
const [DataArray , setDataArray] = useState([]);
React.useEffect(() => {
axios.get(baseURL).then((response)=>{
setDataArray(response.data);
})
}, [])
The empty dependency array say that your request will only be triggered one time (when the component mount). Here's the documentation about the useEffect

Add the code to a function, and then call that function from the button's onClick listener, or the other function. You don't need useEffect because don't want to get data when the component first renders, just when you want to.
function getData() {
axios.get(baseURL).then(response => {
setDataArray(response.data);
});
}
return <button onClick={getData}>Get data</button>
// Or
function myFunc() {
getData();
}

React Update Profile for user through a form

I'm trying to build a Update profile form where a user can change his details and onSubmit the new data will be sent to PUT/users end point to update the details in the database. The form will have the old values pre filled (gotten through a GET request to the same /users endpoint). To access this endpoint we also need to send a basic auth header with email and password. Now I'm making two fetch requests one to get the existing details and one to PUT the new details. My first GET request is successfully made and I can see the data prefilled but my second POST request doesn't work. What am I doing wrong?
Here is how my code looks. https://codesandbox.io/s/dawn-breeze-itinq?file=/src/App.js

const getUsers = async () => {
let myHeaders = new Headers();
myHeaders.set('Authorization', 'Basic ' + credentials);
const requestOptions = {
method: 'GET',
headers: myHeaders,
redirect: 'follow',
};
try {
const response = await fetch(`${APIlink}/users`, requestOptions);
const result = await response.json();
setData(result);
} catch (err) {
setErr('Incorrect Password. Please Retry.');
}
};
useEffect(() => {
getUsers();
}, []);
You useEffect gets called on Every render as you have not mentioned any dependency array. So what happens in your case is,
your component renders --> useEffect gets called --> make api call --> you set state --> component re-renders --> useEffect gets called --> make api call and this cycle continues forever .
useEffect(() => {
....
}); => this useEffect will trigger on first render and every re-render
useEffect(() => {
...
}, []); => this will trigger only for the first time when the component is mounted
useEffect(() => {
...
}, [value]); => triggers on first render and whenever the value changes

If you are familiar with lifecycle methods in class based components, you usually do API calls in componentDidMount lifecycle method. This method is called only once after the first render. More on this: https://reactjs.org/docs/react-component.html#componentdidmount
In your code, you are using useEffect which is more or less like the componentDidUpdate lifecycle method, which is called on every render. this is why,
The page loads and I can see an endless string of GET requests in the network tab.
More on this: https://reactjs.org/docs/react-component.html#componentdidupdate
The solution would be to make your useEffect hook behave like a componentDidMount lifecycle method, which is essentially telling the useEffect hook to run only once.
If we examine a hook, it is made up of two components:
Callback function (required)
Dependency list of props (optional)
which looks like this:
useEffect(Callback, [Dependencies]);
An example would be:
useEffect(() => {
console.log(props.color)
}, [props.color]);
So essentially we are saying that whenever the prop color is changed, we want to log the value of color.
Seeing as how this is, if we pass an empty array of dependencies, the useEffect hook will only run once and that is what you should do. Do note that if a dependencies array is not passed, it will still behave like componentDidUpdate lifecycle method i.e it will be executed on every render.
Solution if you just skipped to this part is:
Pass an empty dependencies list in your useEffect hook.
More on hooks:
https://reactjs.org/docs/hooks-effect.html#explanation-why-effects-run-on-each-update
https://reactjs.org/docs/hooks-effect.html#tip-optimizing-performance-by-skipping-effects

How to pass a document fetched from firestore to local state in react

I have some documents in firebase firestore.
I am using this javascript function to fetch those
const fetchName = async () => {
console.log("fetchName fired");
const snapshot = await db
.collection("Users")
.doc(user?.uid)
.collection("details")
.doc("data")
.get();
// Data is a local state variable
// SetData is used to manipulate Data
setData(snapshot.data());
console.log("Snapped Data: ",snapshot.data());
console.log("Fetched Data: ",Data);
};
This is the state variable
const [Data, setData] = useState("");
I'm passing fetchName() function to useEffect hook.
useEffect(()=>
{
console.log("UseEffect Fired");
if(user!==null)
{
console.log("User not NUll, User->",user);
fetchName();
}
},[user])
The Issue
UseEffect is working correctly and firing fetchName() every time user logs in or logs out.
Here the main problem is When use effect is fired I can see snapshot.data() fetching the correct data but it is not assigning it to setData(). From hit and trial I have seen setData() is fired only the time I make any changes to my code or restart the server.
Desired Result
But I don't want that I want everytime snapshot.data() fetches the data it should assign it to Data using setData()

If you are worried about the 2nd line of console.log inside the fetchName, you're thinking in a wrong way.
So state updates are asynchronous.
For example,
const handleEvent = e => {
setState(e.target.value);
console.log(state);
}
This is not going to log the most updated value - this is happening because state updates are asynchronous, so synchronous behavior after a state update shouldn't rely on the state variable to get the most updated value for it.
For deeper explanation, check here and here

Dispatch async action and getState right after the value is updated in an utility function Redux JS

I have a synchronous flow
const data = store.getState().data
// ... rest of the code
If data === undefined I like to to get it and store in data const similar to this
const data = store.getState().data || getData()
// wait till the data not undefined
// ... rest of the code
getData() is just a wrapper for the dispatch({ type: GET_DATA_ASYNC })
since this dispatch is async it will be caught and executed by a saga watcher and the data object will be updated.
My problem that I can't figured out how to handle this gracefully, to be clear, I want to:
get value from the store
if there is no value - request store update (by already existing action)
when the this particular value is updated - get it back
and store it in the data const
BTW: This is all happening in an external util function

If you are using React hooks, you can use the useSelector hook from "react-redux".
This hook allows you to directly access the store and get the data whenever the store is updated.
import { useSelector } from "react-redux";
export default function Test() {
const data = useSelector(store => store.__reducerVariable_name__);
console.log(data);
// ...
return data;
}