title: avoid function call when change page without changes in states in react
body: <p>i have this code:</p>
  <pre><code>import React, { useEffect, useCallback } from &quot;react&quot;;
  import { useDispatch, useSelector } from &quot;react-redux&quot;;
  import useAuth from &quot;../../hooks/useAuth&quot;;
  import { getTopicsbyDcentro } from '../../slices/topicsSlice';
  import CorpusNameCard from &quot;./CorpusNameCard&quot;;
  import { getAccessTokenApi } from &quot;../../api/auth&quot;;
  import { setToken } from &quot;../../slices/userSlice&quot;;
  
  const CorpusNameFit = () =&gt; {   
   
    const dispatch = useDispatch();
    const accessToken = getAccessTokenApi();  
    dispatch(setToken(accessToken));
      
    const { user } = useAuth();
    const {
      responsable,
      editor,
    } = user;   
   
    const uniqueDCentros = Array.from(new Set(JSON.parse(responsable).concat(JSON.parse(editor))));    
    const getTopics = useSelector((state)=&gt; state.topics.userTopics);   
    console.log(getTopics);
    const topics = Array.from(new Set(getTopics.map((topic)=&gt; [topic.topicName, topic.workspace_id]))); 
    console.log(topics);
    const initFetch = useCallback(() =&gt; { 
      for (let dc of uniqueDCentros) {
        dispatch(getTopicsbyDcentro(dc));                   
      }
            
    }, [dispatch]);    
      
    useEffect(() =&gt; {
      console.log('useEffect');
      initFetch();  
    }, [user] ); 
    
  
    if (getTopics === undefined) return null;
    return (
      &lt;div className=&quot;container&quot; &gt;
        &lt;div className=&quot;subheader-bar&quot;&gt;
          &lt;h1 className=&quot;subheader-bar__title&quot;&gt;Gestión del conocimiento&lt;/h1&gt;
          &lt;p className=&quot;subheader-bar__info&quot;&gt;Estas son las temáticas que tienes asociadas a tu usuario. Selecciona la que quieras consultar.&lt;/p&gt;
        &lt;/div&gt;       
        &lt;div className=&quot;row row-cols-1 justify-content-center row-cols-md-3 g-4 mt-5 mb-5&quot;&gt;
          {topics &amp;&amp; topics.map(title =&gt; &lt;CorpusNameCard key={title} topic={title[0]} workspace_id={title[1]}/&gt;)}        
        &lt;/div&gt;
      &lt;/div&gt;    
          
    );
  };
  
  export default CorpusNameFit;
  </code></pre>
  <p>When i click in navbar 'Corpus de Conocimiento' this code works.
  When i am in the next page if i click again in the navbar 'Corpus de Conocimiento', to comeback to choose other option, the code works again, and the screen show the items duplicates. Because in the slice i have a array.push to store some values.</p>
  <p>This is the slice:</p>
  <pre><code>import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
  import TopicsService from '../services/topics.service';
  
  const initialState = {
    userTopics: [],
    selectTopic: '',
   
  };
  
  export const getTopicsbyDcentro = createAsyncThunk (
    &quot;topics/get&quot;,
    async (dcentroId) =&gt; {        
      const res = await TopicsService.getTopics(dcentroId); 
      return res.data;
    }
  );
  
  const topicsSlice = createSlice({
    name: 'topics',
    initialState, 
    reducers: {
      setTopic: (state, action) =&gt; {
        console.log(action.payload);      
        state.selectTopic = action.payload;
      }
      
    },
    extraReducers: {
      [getTopicsbyDcentro.fulfilled]: (state, action) =&gt; {
        //state.userTopics = initialState;
        state.userTopics.push(...action.payload);
      },        
    }});
  
  export const { setTopic } = topicsSlice.actions;
  
  const { reducer } = topicsSlice;
  export default reducer;
  </code></pre>
  <p>The thing is, if i comeback, my array push and push and push, but if i refresh the page, start from the begining and only store the first call in the array.</p>
  <p>I don't know if the issue is in the slice, that need check the data before push, or the usseffect that avoid recall the function if nothing has changed.</p>
  <p>Thanks for your light</p>