Understanding React Concepts

Before coding, understand these key concepts that we’ll use in our project.

Components

React apps are built with components. A component is a JavaScript function or class that returns JSX (HTML-like code) to render UI.

Components let you break the UI into reusable pieces. In our project, we will have a main App component and a DigitalClock component. Each component manages its own state and returns JSX for rendering.

State and Hooks

We’ll use React Hooks to manage state and side-effects in function components. In particular:

• useState: Allows a component to have internal state. We will use useState to store the current time.  
• useEffect: Runs side-effects in function components. We will use useEffect to set up a timer that updates the state every second. According to React documentation, using useEffect is the correct way to handle external systems like timers (“A timer managed with setInterval() and clearInterval()” is an example of an external effect).

JavaScript Timer (setInterval)

We use the JavaScript function setInterval() to schedule a function to run repeatedly. Specifically, setInterval(fn, 1000) will call fn every 1000 milliseconds (1 second). MDN explains that “the setInterval() method of the Window interface repeatedly calls a function…with a fixed time delay between each call.

In our clock, fn will update the component’s time state. Remember to clear the interval (with clearInterval) when the component unmounts to avoid memory leaks.