Loading [MathJax]/jax/output/HTML-CSS/fonts/TeX/fontdata.js

Redirecting and Lifecycle methods

Imagine you click on a NavLink that gets you to render a specific component. This component is rendered and it is a temporary page, that should be depicted only for 5 seconds after render, and then it should redirect the user to another page.

Although possibly you have already  thought, to implement redirect conditionally and change the variable state, how are you going to count 5 seconds, immediately after the component was rendered? 

Well it seems, that every component has built-in some methods that happen and execute secretly at specific times during a component's lifecycle. For example we can execute a specific function any time a component has mounted to the DOM, or exactly before mounting, or even after. These methods are called lifecycle methods, and come natively with every react component. 

Their names can be found above and to the link if you want to learn more about them. For now we will use the componentDidMount lifecycle method in order to count 5 seconds immediately after the component mounted to the DOM and redirect. 

Let's take a look how.