Component lifecycle
I was putting together some code to demonstrate how modifying a state variable causes a component to rerender. All was going will until I put a timer on the component, that got the current time and displayed it in the page. That worked fine example 1, but it all changed when I wanted to keep a list of all the times and print them all out each time a new time was added, things a got a little weird, example 2.
Example 1.
Get the time and continually display it
import React, { useState } from 'react'
import { useEffect } from 'react';
function getTheTime()
{
let currentDate = new Date();
let currentTime = currentDate.getHours() + ":" + currentDate.getMinutes() + ":" + currentDate.getSeconds();
return currentTime;
}
export default function FCDisplayTimeInSameSpot(){
console.log("Executing FCDisplayTimeInSameSpot()");
const [containerState, setContainerState] = useState(["<NO TIME SET>"]);
const getDisplayData = () => {
const cdata = containerState
return cdata;
}
// This useEffect will only run once when the component is first mounted
useEffect(()=>{
setInterval(()=>{
setContainerState(getTheTime());
}, 10000);
}, [])
// This useEffect will run every time the component re-renders
useEffect(() =>{
console.log(getDisplayData())
})
// This useEffect will only run once when the component is first mounted
useEffect(() =>{
console.log("mounting the FCDisplayTimeInSameSpot");
}, []);
// This useEffect will run every time the component is unmounted
useEffect(() =>{
return ()=>console.log("unmounting the FCDisplayTimeInSameSpot");
});
return (
<>
<p>Time is - {getDisplayData()}</p>
</>
)
}Drop this component as a child of any other component to see it work e.g.
import React from 'react';
import './App.css';
import FCDisplayTimeInSameSpot from './FCDisplayTimeInSameSpot';
function App() {
const switchComponents = true;
return (
<div className="App">
<header className="App-header">
<FCDisplayTimeInSameSpot/>
</header>
</div>
);
}
export default App;
Monitor the behaviour from the outputs in the browser’s console, you will notice the following
Event | What’s executed in order shown |
|---|---|
Initial loading of the component Notice that both these useEffects() with the lambda and empty array are called once and only once |
// This useEffect will only run once when the component is first mounted
useEffect(()=>{
setInterval(()=>{
setContainerState(getTheTime());
}, 10000);
}, [])
// This useEffect will only run once when the component is first mounted
useEffect(() =>{
console.log("mounting the FCDisplayTimeInSameSpot");
}, []); |
Component needs to be re-rendered Notice that the component method is first called, then it is unmounted, then is finally re-rendered through the component return() block (you can see this because the useEffect() with only the lambda is called |
|
Notice that the component method is always called. In actual fact, the useState() methods are called each time the component method is called, therefore resetting the state variable back to its initial value. To see this at work, modify the useEffect() call at 22-26 so the following
The timeStamp variable serves no real purpose except to allow us to put a breakpoint in the code and examine the values in the variables. I've also changed the timer from 10 seconds to 30 seconds to give us time to examine the variables.
Set a breakpoint on the timeStamp variable. When the code breaks, hover your mouse over timeStamp it should be undefined. Step over it and it should be set to <NO TIME SET>. This is the initial value from the useState() call.
So what are we seeing here? Whenever the component’s state changes (achieved by modifying any of its state variables through their setter methods), the component method will be called and useState() will be called re-initialising the variable. So we need to make use of the useEffect() method during the component's lifecycle.
If you want data to persist across component renders, you need to use useRef(). We'll cover this in another section
Example 2
All of the above explains why the following code will not run as expected if you don’t use the useRef() callback