title: how to useCallback in useEffect when fetching data in async mode
body: <p>can any one help me with that
  actually i am trying to add useCallback function but it's seems not working it's loading
  not showing any data
  every time i change page and came back to the &quot;users&quot; url it's start re-render
  plz help me with this
  plz if any one can help me i would be a help for me.</p>
  <p>here is my Sandbox link
  <a href="https://codesandbox.io/s/blog-elqn4" rel="nofollow noreferrer">CodeSandbox for live</a></p>
  <p>but i'm using my own django server</p>
  <p>my Store.js
  here is my Store that is created</p>
  <pre><code>    import React, { createContext, useEffect, useReducer } from &quot;react&quot;;
  import axios from &quot;axios&quot;;
  import { BlogReducer } from &quot;./Reducer/Reducer&quot;;
  
  const url = &quot;http://localhost:8000/api/&quot;;
  export const MyData = createContext();
  axios.defaults.baseURL = url;
  axios.defaults.withCredentials = true;
  const Store = ({ children }) =&gt; {
    const initialState = {
      posts: [],
      users: [],
      user: {},
      loading: true,
      error: false,
      addUsers: async (value) =&gt; {
        const data = await axios.post(url, value);
        dispatch({
          type: &quot;ADD_ARTICLE&quot;,
          payload: data,
        });
      },
      reset: () =&gt; {
        dispatch({
          type: &quot;REST_ARTICLE&quot;,
        });
      },
    };
    const [state, dispatch] = useReducer(BlogReducer, initialState);
    return (
      &lt;MyData.Provider value={{ state, dispatch }}&gt;{children}&lt;/MyData.Provider&gt;
    );
  };
  
  export default Store;
  </code></pre>
  <p>my App.js i used react-router-dom .</p>
  <p>my App.js</p>
  <pre><code>import { BrowserRouter as Router, Route, Switch } from &quot;react-router-dom&quot;;
      function App() {
    return (
      &lt;Router&gt;
        &lt;MyNavbar /&gt;
        &lt;Store&gt;
          &lt;Switch&gt;
            &lt;Route exact component={UsersList} path=&quot;/users&quot; /&gt;
          &lt;/Switch&gt;
        &lt;/Store&gt;
        &lt;MyFooter /&gt;
      &lt;/Router&gt;
    );
  }
  </code></pre>
  <p>my Reducer.js</p>
  <pre><code>    import { UserConst } from &quot;../Const/userConst&quot;;
  export const BlogReducer = (state, { type, payload }) =&gt; {
    switch (type) {
      case UserConst.ON_USERS_LIST_LOADING:
        return { ...state, users: [], loading: true, error: false };
      case UserConst.ON_USERS_LIST_FAIL:
        return { ...state, users: [], loading: false, error: true };
      case UserConst.ON_USERS_LIST_SUCCESS:
        return { ...state, users: payload, loading: false, error: false };
      case UserConst.ON_USER_REMOVE:
        const newUserList = state.users.filter((user) =&gt; user.id !== payload);
        return { ...state, users: newUserList };
      default:
        return state;
    }
  };
  </code></pre>
  <p>my UsersList.js</p>
  <pre><code>    import React, { useContext, useEffect, useRef, useState } from &quot;react&quot;;
      import { MyData } from &quot;../Store&quot;;
      import axios from &quot;axios&quot;;
      import { UserConst } from &quot;../Store/Const/userConst&quot;;
      import { Link } from &quot;react-router-dom&quot;;
      import { Table, Modal } from &quot;react-bootstrap&quot;;
      import DeleteIcon from &quot;@material-ui/icons/Delete&quot;;
      import EditIcon from &quot;@material-ui/icons/Edit&quot;;
      import Button from &quot;@material-ui/core/Button&quot;;
      import Tooltip from &quot;@material-ui/core/Tooltip&quot;;
      import { List, ListItem } from &quot;@material-ui/core&quot;;
      import ListItemAvatar from &quot;@material-ui/core/ListItemAvatar&quot;;
      import ListItemText from &quot;@material-ui/core/ListItemText&quot;;
      const UsersList = () =&gt; {
      const { state, dispatch } = useContext(MyData); //state value
      const getUsersData = async () =&gt; {
      try {
        dispatch({
          type: UserConst.ON_USERS_LIST_LOADING,
        });
        const response = await axios.get(&quot;users&quot;);
        const users = await response.data.data;
        dispatch({
          type: UserConst.ON_USERS_LIST_SUCCESS,
          payload: users,
        });
      } catch (error) {
        dispatch({
          type: UserConst.ON_USERS_LIST_FAIL,
        });
      }
      };
     
  
      useEffect(() =&gt; {
       getUsersData();
      }, []);
  
      const actions = (id) =&gt; {
      return (
        &lt;&gt;
          &lt;Tooltip title=&quot;Delete&quot; arrow&gt;
            &lt;Button variant=&quot;outlined&quot;&gt;
              &lt;DeleteIcon color=&quot;action&quot; onClick={() =&gt; deleteHandler(id)}&gt;
                Delete
              &lt;/DeleteIcon&gt;
            &lt;/Button&gt;
          &lt;/Tooltip&gt;
          &lt;Tooltip title=&quot;Edit&quot; arrow&gt;
            &lt;Link to={`/users/${id}/edit`}&gt;
              &lt;Button variant=&quot;outlined&quot;&gt;
                &lt;EditIcon color=&quot;primary&quot;&gt;Edit&lt;/EditIcon&gt;
              &lt;/Button&gt;
            &lt;/Link&gt;
          &lt;/Tooltip&gt;
        &lt;/&gt;
      );
      };
      const deleteHandler = async (id) =&gt; {
      await axios.delete(`users/${id}`);
      setSearchData((people) =&gt; {
        return people.filter((person) =&gt; person.id !== id);
      });
      dispatch({
        type: UserConst.ON_USER_REMOVE,
        payload: id,
      });
    };
      const inputRef = useRef(null);
      const [show, setShow] = useState(false);
      const handleClose = () =&gt; setShow(false);
      const handleShow = () =&gt; {
      setShow(!show);
      };
      useEffect(() =&gt; {
      if (show === true) {
        inputRef.current.focus();
      }
    
  
        }, [show]);
         const [search, setSearch] = useState(&quot;&quot;); // input field
         const [searchData, setSearchData] = useState([]); //the data what we want
         const url = `users?search=${search}`; //search URL
         return (
          &lt;div&gt;
            {state.loading ? (
              &lt;h3&gt;Loading....&lt;/h3&gt;
            ) : state.error ? (
              &lt;h3&gt;Error&lt;/h3&gt;
            ) : (
              &lt;&gt;
                &lt;div className=&quot; text-right&quot;&gt;
                  &lt;Button onClick={handleShow}&gt;Search&lt;/Button&gt;
                &lt;/div&gt;
                &lt;div&gt;
                  &lt;Modal
                    keyboard={true}
                    show={show}
                    onHide={handleClose}
                    backdrop=&quot;static&quot;
                  &gt;
                    &lt;Modal.Header closeButton&gt;
                      &lt;Modal.Title&gt;Search User&lt;/Modal.Title&gt;
                    &lt;/Modal.Header&gt;
                    &lt;Modal.Body&gt;
                      &lt;input
                        ref={inputRef}
                        name=&quot;search&quot;
                        onChange={async (e) =&gt; {
                          setSearch(() =&gt; e.target.value);
                          const response = await axios.get(url);
                          const data = await response.data.data;
                          setSearchData(data);
                        }}
                        value={search}
                      /&gt;
                      &lt;List&gt;
                        {searchData.map((data) =&gt; {
                          return (
                            &lt;ListItem key={data.id}&gt;
                              &lt;ListItemAvatar&gt;{actions(data.id)}&lt;/ListItemAvatar&gt;
                              &lt;ListItemText className=&quot;ml-2&quot;&gt;
                                {data.email}
                              &lt;/ListItemText&gt;
                              &lt;ListItemText&gt;@{data.username}&lt;/ListItemText&gt;
                            &lt;/ListItem&gt;
                          );
                        })}
                      &lt;/List&gt;
                    &lt;/Modal.Body&gt;
                    &lt;Modal.Footer&gt;
                      &lt;Button variant=&quot;secondary&quot; onClick={handleClose}&gt;
                        Close
                      &lt;/Button&gt;
                    &lt;/Modal.Footer&gt;
                  &lt;/Modal&gt;
                &lt;/div&gt;
                &lt;Table striped bordered hover size=&quot;sm&quot;&gt;
                  &lt;thead&gt;
                    &lt;tr&gt;
                      &lt;th&gt;#&lt;/th&gt;
                      &lt;th&gt;Name&lt;/th&gt;
                      &lt;th&gt;Email&lt;/th&gt;
                      &lt;th&gt;Username&lt;/th&gt;
                      &lt;th&gt;&lt;/th&gt;
                    &lt;/tr&gt;
                  &lt;/thead&gt;
                  &lt;tbody&gt;
                    {state.users.map((user) =&gt; {
                      return (
                        &lt;tr key={user.id}&gt;
                          &lt;td&gt;{user.id}&lt;/td&gt;
                          &lt;td&gt;
                            {user.first_name} {user.last_name}
                          &lt;/td&gt;
                          &lt;td&gt;{user.email}&lt;/td&gt;
                          &lt;td&gt;@{user.username}&lt;/td&gt;
                          &lt;td&gt;{actions(user.id)}&lt;/td&gt;
                        &lt;/tr&gt;
                      );
                    })}
                  &lt;/tbody&gt;
                &lt;/Table&gt;
               &lt;/&gt;
             )}
            &lt;/div&gt;
           );
         };
      
          export default UsersList;
  </code></pre>
  <p>plz help me to stop re-rendering the state every time i cange the &quot;users&quot; url</p>