I am trying to fetch data(Array) from an API and store it in a variable using useState(). I am getting Data but can’t store it 

The issue you’re facing is related to the asynchronous nature of state updates in React’s useState hook. When you call setProducts(response.data), the state update doesn’t happen immediately but is scheduled to occur in the future. So, when you immediately log products after setProducts(response.data), it still references the old state value, which is why you see an empty array.

The updated state will be available in the next render cycle, not immediately after setProducts is called. If you want to perform actions after the state has been updated, you can use the useEffect hook to react to state changes. Here’s an example of how you can log the products state after it has been updated:

import React, { useState, useEffect } from 'react';
import axios from 'axios';

// Assuming getProductsApi is defined elsewhere and correctly fetches the data
// export const getProductsApi = async () => {
//     const response = await axios.get("http://localhost:8000/api/products");
//     return response;
// }

const MyComponent = () => {
  const [products, setProducts] = useState([]);

  const fetchProducts = async () => {
    const response = await getProductsApi(); // Assuming this function correctly fetches the data
    setProducts(response.data);
  };

  // Effect for fetching products
  useEffect(() => {
    fetchProducts();
    // The cleanup function is not needed in this case, so it can be omitted.
  }, []); // Empty dependency array means this effect runs once after the initial render

  // Effect to log products after it's been updated
  useEffect(() => {
    console.log(products); // This will log the updated state
  }, [products]); // This effect runs whenever `products` changes

  return (
    <div>
      {/* Render your products here */}
    </div>
  );
};

export default MyComponent;

In this updated example, a second useEffect hook is used. It has products as a dependency, which means it will run every time products is updated. This is where you can reliably log the updated products state or perform any other side effects that depend on the current value of products.

Remember, the asynchronous nature of state updates is a fundamental part of how React’s state management works, designed to optimize performance and consistency in your application’s UI.