The fetch call is asynchronous. This means it is not guaranteed to be complete before the program enters the next line.

Because of this the blogs array will be empty at the first render. You can add an check in the src CardItem component to only use the value returned from the fetch call when it is available:

<CardItem
  src={blogs.length > 0 ? blogs[0].mainImage : ''}
  ...
/>

An alternative would be to use the fact that blogs is an array and use the map operator to build one or more CardItems.

<ul className='cards-items'>
  {blogs.map(blog => <CardItem
    src={blog.mainImage}
    ...
  />)}
</ul>

You might want to try adding conditional logic within the useEffect so you only trigger the dispatch if you don't already have a profile.

import "./styles.css";
import { useDispatch, useSelector } from "react-redux";
import { useEffect, useCallback } from "react";
import { getCurrentProfile } from "./action";

export const Profile = () => {
  const dispatch = useDispatch();
  const profileReducer = useSelector((state) => state.profile);
  const authReducer = useSelector((state) => state.auth);
  const { profile, error, loading } = profileReducer;
  // read more about this here: https://stackoverflow.com/questions/58624200/react-hook-useeffect-has-a-missing-dependency-dispatch
  const stableDispatch = useCallback(dispatch, []);

  useEffect(() => {
    if (!profile) {
      stableDispatch(getCurrentProfile());
    }
  }, [profile, stableDispatch]);

  const { user } = authReducer;

  console.log("loading", loading);
  console.log("profile", profile);

  return loading && profile === null ? <div>Spinner</div> : "Actual Profile";
};

export default Profile;

Also, it doesn't seem like you're currently doing anything with the loading piece of state–at least from what you've shared here. You might want to dispatch an action indicating that you're loading before you start the fetch and then it will be set to false when you get the response.

Check out this codesandbox for reference: https://codesandbox.io/s/focused-kilby-gd2nr?file=/src/App.js

Reducers:

const initialState = {
  profile: null,
  loading: false
};
export const profile = (state = initialState, action) => {
  const { type, payload } = action;

  switch (type) {
    case "LOADING_PROFILE":
      return {
        ...state,
        loading: true
      };
    case "GET_PROFILE":
      return {
        ...state,
        profile: payload,
        loading: false
      };

    case "PROFILE_ERROR":
      return {
        ...state,
        error: payload,
        profile: null
      };
    case "CLEAR_PROFILE":
      return {
        ...state,
        profile: null,
        loading: false
      };
    default:
      return state;
  }
};

export const auth = (state = {}, action) => {
  return state;
};

Action Creator:

import axios from "axios";
export const getCurrentProfile = () => async (dispatch) => {
  try {
    dispatch({ type: "LOADING_PROFILE" });
    const res = await axios.get("https://jsonplaceholder.typicode.com/users/1");
    console.log(res);
    dispatch({
      type: "GET_PROFILE",
      payload: res.data.data
    });
  } catch (err) {
    dispatch({
      type: "PROFILE_ERROR",
      payload: { msg: err.response.statusText, status: err.response.status }
    });
  }
};

index.js

import { StrictMode } from "react";
import ReactDOM from "react-dom";
import { Provider } from "react-redux";
import { createStore, combineReducers, applyMiddleware } from "redux";
import { profile, auth } from "./reducers";
import App from "./App";
import thunk from "redux-thunk";

const store = createStore(
  combineReducers({
    profile,
    auth
  }),
  applyMiddleware(thunk)
);

const rootElement = document.getElementById("root");
ReactDOM.render(
  <StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </StrictMode>,
  rootElement
);

Try

useEffect(() => getUsers(),[Details]);

Adding your state as the dependency should allow it run every time the state changes

Try this:

  useEffect(() => {
if (localStorage.myLanguage[7] == "p") {
  setAge("Translate One");
} else {
  setAge("Translate Two");
}
  }, [localStorage.myLanguage]);

Which should run every time the array localStorage.myLanguage changes. Let me know if it works since I have not tried it with your code of course. If it throws an error saying that the length has changed then do this:

[localStorage.myLanguage.join(',')]

You are using an empty object as the initial state for studentInfo (the value passed to useState hook will be used as the default value - docs):

const [studentInfo, setStudentInfo] = useState({});

.map is only supported on Arrays. So this is failing when the component is rendering before the useEffect has completed and updated the value of studentInfo from an object, to an array. Try swapping your initial state to be an array instead:

const [studentInfo, setStudentInfo] = useState([]);

It seems like your token is not set by the time the component mounts and calls this useEffect().

I can think of 2 options:

1. store your session data in an outer context state and get the token from there. Then you can add token as a dependency in useEffect():

// assuming token is stored in context state 
// and will update
const {token} = useAuthContext() 
useEffect(() => {
// ...
// will be called every time the token changes
}, [token])

2. Subscribe to localStorage in this component. react-hookz lib has a nice hook already written, providing it here for simplicity:

import { useLocalStorageValue } from '@react-hookz/web'

const PatientsProvider = (props) => {
const [token] = useLocalStorageValue('token')

useEffect(() => {
// do sth with the token
}, [token])

Since you are mutating the original node element in place instead of updating it in an immutable manner, setChartData isn't triggering a re-render as react checks if the value passed to state updater is actually changed from previous value or not and since the reference is same it believes that nothing has changed

According to React principles you must never mutate state values instead update them in an immutable way.

If its possible for you to update the state in an immutable manner, please do that in toggleNodeByRank

However you can still work around by shallow cloning the node like

const toggleNodeByRank = async (nodeArg, rank) => {
    const node = {...nodeArg};
    if (node && node.data) {
      return node;
    }
  };

After doing the above change, it would trigger a re-rerender but you must know that it isn't the best way

When you switch from one user to another, the component won't remount so:

const [user, setUser] = useState(location.state);

Is stuck on the previous location.state value. Therefore it may be stuck on one which does not pass the condition !user?.id.

I suspect this will be the case because location.state is the push state, and that means if you visit this page from the outside, or if you click on a <Link> like yours which does not redefine the push state, it will empty. But I think using this in the first place was an accident. Please note the location.state property is not related to the params. It's an entirely different mechanism that looks irrelevant here.

So the if condition does not pass and the fetch never happens.

The use of location.state as a default value does not make sense. I think this should just be null or undefined.

And then make the condition in the effect actually check the param and not the user you already have (might not even have it yet), or when you fetch the first user, it will never evaluate to true inside that if condition ever again since user.id is populated.

It also doesn't make sense for user to be in the effect deps. That would create an infinite loop with these other changes (I think maybe that's when you added conditions that didn't make sense). You only care about if the URL ID changes in that effect and that's it.

import React, { useState, useEffect } from 'react'
import { Link, useParams, useLocation } from 'react-router-dom';

function UserDetail() {
    const { id } = useParams();
    const location = useLocation();
    const [user, setUser] = useState();
    console.log(location)

    useEffect(() => {
        if (id !== undefined) {
            fetch(`https://jsonplaceholder.typicode.com/users/${id}`)
                .then((res) => res.json())
                .then((data) => setUser(data))
            console.log("if olan")
        }

    }, [id])


    return (
        <div>
            <h2>
                User Detail
            </h2>

            {user && <pre>
                {JSON.stringify(user, null, 2)}
            </pre>}
            <Link to={`/users/${Number(id) + 1}`}>Next User</Link>
        </div >
    )
}

export default UserDetail