title: Why doesn't useEffect hook work on page refresh?
body: <p>I'm working on a react project. I have my own API to fetch information. I'm using the useEffect hook to fetch profile information from API. My problem is when page mounts for the first time i can fetch the data with no problem but if i refresh the page it doesn't work at all. I know i have to give a second parameter to useEffect. I tried to put profile as the second argument even dispatched the getCurrentProfile function but when i do that it constantly fires off fetch request. I would be glad if anyone can help me with that. Thanks.</p>
  <p>Here is my Profile component:</p>
  <pre><code>export const Profile = () =&gt; {
  const dispatch = useDispatch();
  useEffect(() =&gt; {
      dispatch(getCurrentProfile());
  
  }, [])
  
  const profileReducer = useSelector((state) =&gt; state.profile);
  const authReducer = useSelector((state) =&gt; state.auth);
  const { profile, error, loading } = profileReducer;
  
  
  
  const { user } = authReducer;
  
  console.log(&quot;loading&quot;, loading)
  console.log(&quot;profile&quot;, profile)
  
  return loading &amp;&amp; profile === null ? (
      &lt;div &gt;
          &lt;Spinner /&gt;
      &lt;/div&gt;
  ) :
  </code></pre>
  <p>Here is my Profile action:</p>
  <pre><code>export const getCurrentProfile = () =&gt; async dispatch =&gt; {
  
  try {
      const res = await axios.get(&quot;/api/profile/me&quot;);
      console.log(res);
      dispatch({
          type: &quot;GET_PROFILE&quot;,
          payload: res.data.data
      })
  } catch (err) {
      dispatch({
          type: &quot;PROFILE_ERROR&quot;,
          payload: { msg: err.response.statusText, status: err.response.status }
      })
  }
  </code></pre>
  <p>}</p>
  <p>Here is my profile reducer:</p>
  <pre><code>export default (state = initialState, action) =&gt; {
  const { type, payload } = action;
  
  switch (type) {
      case &quot;GET_PROFILE&quot;:
          return {
              ...state,
              profile: payload,
              loading: false
          }
  
      case &quot;PROFILE_ERROR&quot;:
          return {
              ...state,
              error: payload,
              profile: null
          }
      case &quot;CLEAR_PROFILE&quot;:
          return {
              ...state,
              profile: null,
              loading: false
          }
      default:
          return state;
  }
  </code></pre>
  <p>}</p>