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 the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.