How to do it...

Build a LifeCycleTime component whose only purpose would be to display the current time. The component will be updated every 100 ms to keep the component in sync with the time change. We will use the life cycle methods in this component for the following purposes:

  • constructor(props): To initialize the component's initial state.
  • static getDerivedStateFromProps(nextProps, nextState): To merge the props with the state.
  • componentDidMount(): To set a function that will be executed every 100 ms using setInterval, which will update the state with the current time.
  • shouldComponentUpdate(nextProps, nextState):To decide if the component should be rendered or not. Check if props have a property dontUpdate set to true, which means the ...

Get MERN Quick Start Guide now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.