How to call a function before a functional component render in ReactJS

Question

I have a <Loading /> component that wraps all routes in my app.
The <Loading /> component has a property isLoading that receives a Redux state variable, that tells if the Loading component will be visible or not.

function App() {
    const isLoading = useSelector((state) => state.loading.value)
    
    return (
        <Loading isLoading={isLoading}>
            <BrowserRouter>
                <Routes>
                    <Route path='/' element={<Hypertube />} />
                    <Route path='/login' element={<Login />} />
                    <Route path='/register' element={<Register />} />
                </Routes>
            </BrowserRouter>
        </Loading>
    );
}

When the user opens a page, I need to change the Redux state to true, so the <Loading /> component will be visible (and then hide it when the page gets rendered).
So what I need, is to change the state before the functional component gets rendered (or while the component is rendering).

I wanted to use componentWillMount(), but it's deprecated now.

A solution to this (that I don't like) is to do this 2 changes:

Set the default redux state value to true, so we can see the loading whenever the page get opened for the first time.
Change the state value to true whenever the user get redirected to another page.

Why isn't the default value true?

Konrad
– Konrad

2022-11-15 17:19:59 +00:00
Commented Nov 15, 2022 at 17:19 — Konrad
– Konrad, Commented Nov 15, 2022 at 17:19

kind user · Accepted Answer · 2022-11-15 18:19:49Z

2

How to call a function before a functional component render in ReactJS

Theoretically you could dispatch an action on component's mount (in useEffect hook) to set the loading state to true, but a single flick may be visible (because the component will have to re-render).

A standard solution for it is to set the default value of state.loading.value to true in the redux store.

If you want to set the loading value to true with every route change, you could e.g. listen to the location change:

import { useLocation } from 'react-router-dom';

const location = useLocation();

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

Or you could just dispatch this action in every component within useEffect where you want the loader to appear.

edited Nov 15, 2022 at 18:19

answered Nov 15, 2022 at 17:20

kind user

42k8 gold badges69 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

kind user Over a year ago

@arrmani88 You want to show the loader with every route change, right?

arrmani88 Over a year ago

should I add this only in App() function ?

kind user Over a year ago

@arrmani88 Check firstly if it works for you well :)

arrmani88 Over a year ago

Sorry for this late answer, thank you so much your solution is working, I also will let you know if I find a way how to call a function before a functional component render

Collectives™ on Stack Overflow

How to call a function before a functional component render in ReactJS

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related