React: How to update parent component's useEffect hook when using routes

Question

I use the useEffect hook to dispatch the getQuestions function in order to get the data from the server

function App () {
    const dispatch = useDispatch();

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

    return (
        <Routes>
            <Route exact path="/" element={<Layout/>}>
                <Route path="repetition" element={<Repetition/>}/>
                <Route path="family" element={<Family/>}/>
            </Route>
        </Routes>
    );
}

The problem is that when I, for example, open the family link (which I declared in the App function), initially I get the data, but when I refresh the page, the data disappears.

I certainly understand that when the page is refreshed the parent App component is not rendered from this and I get an error, similar issues I have looked at in the forums where it was suggested to use withRouter which updates the parent component, but my version of react-router-dom does not supports withRouter, except that I don't want to downgrade my version of react-router-dom to use withRouter.

I would like to know if there is any way to fix this problem.

Thanks for the question @Fallen! I thought about it, but here, in my subjective opinion, there is one problem, at the moment I have 5 child elements and I will have to declare useEffect in each child element, of course I don’t know for sure, but I don’t think this is the best option — Synchro, Nov 20 '22 at 15:00
@Synchro, each child component should require different type of data and making it a single request will not only be resource heavy but will also contain which might not even be put to use. So, i believe making 5 different request is appropriate but still it's only my opinion it might not apply to your case. — Fallen, Nov 20 '22 at 15:06
@Fallen I'll try your suggestion now. I originally thought of creating a large object with child arrays. Then I wanted to get a specific array in a specific child I'll try your, suggestion then test it in Google LightHouse and let you know later — Synchro, Nov 20 '22 at 15:15
@junwen-k Thanks for the interesting suggestion, I tried to save the data in the context but unfortunately it did not help — Synchro, Nov 20 '22 at 15:18

score 0 · Answer 1 · answered Nov 20 '22 at 20:50

I tried the option that @Fallen suggested, i.e. I applied the useEffect hook in each child element and analyzed this approach in GoogleLighthouse, and I'm happy with the results.

Here is my final code in child component

function Family () {
    const dispatch = useDispatch();
    const questions = useSelector(state => state.QuestionsSlices.familyQuestions);

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

    return (
        <>
            {questions.data.map((item, idx) => (
                <div key={idx}>
                    { idx + 1 === questions.score && CheckQuestionsType(item, questions) }
                </div>
            ))}
        </>
    );
}

React: How to update parent component's useEffect hook when using routes

1 Answers1