How to remember the value of a variable so as not to cause an effect on mounting and remounting?

Question

React

Good afternoon. If the url contains the name of the pokemon, then the application renders the detail view component.

app.js

import React from 'react';
import { Route } from 'react-router-dom';
import Header from './components/Header/Header';
import Pokedex from './components/Pokedex/Pokedex';
import PokePage from './components/PokePage/PokePage';

const App = () => (
    <React.Fragment>
        <Header />
        <Route exact path="/pokedex/">
            <Pokedex />
        </Route>
        <Route path="/pokedex/:pokeName">
            <PokePage /> // страница детального просмотра покемона
        </Route>
    </React.Fragment>
);

export default App;

In the detail view component I get the pokemon name via `useParams()` react-router-dom

PokePage.js

import React, {useEffect} from 'react';
import { useDispatch, useSelector } from 'react-redux';
import {useParams} from 'react-router-dom';
import {Container} from '@material-ui/core';
import {fetchPokemonByName} from "../../redux/PokeDetail/operations";
import pokeDetailSelectors from "../../redux/PokeDetail/selectors";

const mapState = (state) => ({
    pokemon: pokeDetailSelectors.getPokemon(state),
    error: pokeDetailSelectors.getError(state),
});

const PokePage = () => {
    const { pokeName } = useParams();
    const dispatch = useDispatch();
    const {pokemon, error} = useSelector(mapState);

    useEffect(() => {
        dispatch(fetchPokemonByName(pokeName));
    }, [pokeName]);

    return (
        <React.Fragment>
            <Container maxWidth="lg">
                <h1>Detail page in dev process</h1>
                Pokemon name: {pokeName}
            </Container>
        </React.Fragment>
    );
};
export default PokePage;

The variable pokeName is a dependency for the effect.

Question: Is it possible to make it so that when the component is remounted, the previous value of the pokeName variable is already available, and only if it has changed to dispatch? I'm new to react, and for some reason I want to look in the direction of useMemo or useCallback, but for the life of me I can't figure out how to use it in this particular component, which dies every time we leave it. There is an idea that App.js would check the value has changed, and based on this, pass the appropriate flag to the props, but there is a feeling that this is a crutch, and there is a simpler and more elegant solution that will keep the responsibility in this component.

Answer 1

You can't say to a dying component: Pass this on to the next generation.
Since there is already an editor, you can organize data caching on it. When dispatching, check the availability of data in the cache, their freshness. No - we went for the data, put it in the cache. Yes - we do nothing, the select component will pull them out anyway.