You can check for data !== null && return (...) for conditional rendering. Since it will rerender after data loaded, it would also prevent from empty rendering.
I just saw what you did in your customer state. You shouldn't initialize customer state with promise state. What I mean by that is:
export default function App() {
const [person, setPerson] = useState([]);
useEffect(() => {
fetch("jsonplaceholder.typicode.com/users")
.then((response) => {
return response.json();
})
.then((data) => {
setPerson(data); // You Need this For set Person to state person
});
}, []);
console.log("dasdasd", person);
// This is the part which is updated:
const [customers, setCustomers] = useState({});
// Passing person as a dependency will allow customers to update automatically
useEffect(() => {
person !== null && setCustomers({data: person});
}, [person])
It works like this:
1-) Initial page rendering with empty person state, then renders your fetch effect (the second effect did not process because person === null)
2) After the first effect process is done, it will change the person and we put the person state as a dependency for the second effect, it will re-render. Then obviously it will re-render the part of the document.
So, it will not get called until the person state is changed. It will get called if the person state changes.
Since we added person as dependency , you said it will re-render when person state is updated. so there might be chances of hitting the API twice right? depending upon the person state?
As far as I remember, we should've written API connection in separate effect. So, It shouldn't hit for API twice. It will only recall for customers effect.
PS: There's a solution below: after you call for API, setPerson and setCustomers.
.then((data) => {
setPerson(data);
setCustomers(data) // You Need this For set Person to state person
});
Maybe this can work aswell.
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
You can check for data !== null && return (...) for conditional rendering. Since it will rerender after data loaded, it would also prevent from empty rendering.
It is being empty forever, not re-rendering at all.
I just saw what you did in your customer state. You shouldn't initialize customer state with promise state. What I mean by that is:
export default function App() {
const [person, setPerson] = useState([]);
useEffect(() => {
fetch("jsonplaceholder.typicode.com/users")
.then((response) => {
return response.json();
})
.then((data) => {
setPerson(data); // You Need this For set Person to
state person
});
}, []);
console.log("dasdasd", person);
// This is the part which is updated:
const [customers, setCustomers] = useState({});
// Passing person as a dependency will allow customers to update automatically
useEffect(() => {
person !== null && setCustomers({data: person});
}, [person])
return
{JSON.stringify(customers)};}
By dependency, you mean the above block of code gets called every time until person state is changed?
It works like this:
1-) Initial page rendering with empty person state, then renders your fetch effect (the second effect did not process because person === null)
2) After the first effect process is done, it will change the person and we put the person state as a dependency for the second effect, it will re-render. Then obviously it will re-render the part of the document.
So, it will not get called until the person state is changed. It will get called if the person state changes.
Since we added
person
as dependency , you said it will re-render when person state is updated. sothere might be chances of hitting the API twice right?
depending upon the person state?Please correct me If I am wrong
As far as I remember, we should've written API connection in separate effect. So, It shouldn't hit for API twice. It will only recall for customers effect.
PS: There's a solution below: after you call for API, setPerson and setCustomers.
.then((data) => {
setPerson(data);
setCustomers(data) // You Need this For set Person to
state person
});
Maybe this can work aswell.