State not getting updated when calling the related setState in React

by

What you are doing wrong is that you are trying to console.log before React has re-rendered. Updating a state through the related setState is not instantaneous as the doc says:

The set function only updates the state variable for the next render. If you read the state variable after calling the set function, you will still get the old value that was on the screen before your call.

One way to log changes in your state is to add a console.log() just after defining it:

const [images, setImages] = useState([]);
// It logs [] the first time and then the fetched data
console.log(images);

useEffect(() => {
  Axios.get(
    "https://api.unsplash.com/photos/?client_id=l2U-D_PXXujBJoRiCCMCL2ifi_5ZJcK4AC0WH-A2lKk"
    )
    .then((res) => {
      setImages(res.data);
    })
    .catch((err) => console.error(err));
}, []);

More Related Contents:

  1. What do multiple arrow functions mean in JavaScript?
  2. Show or hide element in React
  3. How to set focus on an input field after rendering?
  4. babel-loader jsx SyntaxError: Unexpected token [duplicate]
  5. react router v6 navigate outside of components
  6. Correct use of arrow functions in React
  7. React Native: require() with Dynamic String?
  8. React functional stateless component, PureComponent, Component; what are the differences and when should we use what?
  9. How can I update state.item[1] in state using setState?
  10. React react-router-dom pass props to component
  11. What’s the difference between `useRef` and `createRef`?
  12. Active link with React-Router?
  13. How can I render repeating React elements?
  14. How to hide navbar in login page in react router
  15. Cleaner/shorter way to update nested state in Redux?
  16. How to make Puppeteer work with a ReactJS application on the client-side
  17. How to bind onclick handlers to `this` properly on React
  18. What’s the ‘@’ (at symbol) in the Redux @connect decorator?
  19. React-router: How to manually invoke Link?
  20. Module not found: Can’t resolve ‘firebase’ in
  21. Why did this code fail to send password reset link in firebase?
  22. How can I toggle a class on click with React?
  23. children prop in React component
  24. React Error: Target Container is not a DOM Element
  25. Is it possible to use dotenv in a react project?
  26. add raw HTML with inside Gatsby React page
  27. How to connect MySQL database to ReactJS app?
  28. What does the ‘…rest’ stand for in this object destructuring?
  29. How to deploy a React + NodeJS Express application to AWS?
  30. Use Bootstrap with React

Leave a Comment