Frontend Hire
Frontend
Back to frontend track
Deprecated

Overview

React Hooks: useEffect - 1

The useEffect hook is notorious to cause majority of bugs in most React projects. Can you solve a similar bug?

OverviewSolution

Practice

Code as you read.

Use the live workspace to test the prompt.

React useEffect practice workspace

Best in a separate tab.

Open StackBlitz

Question

90% of the bugs in React applications are caused due to useEffect.

Why did the React component feel lost? Because it was missing its useEffect dependencies!

Objective

Identify and fix the bugs related to resetting the timer.

Requirements

  • Identify the Bug: The provided App component has a timer that can be reset. However, there's a bug in the useEffect implementation.
  • Understand the Dependency Array: Analyze how the seconds state is being used in the useEffect dependency array.
  • Fix the Bug: Modify the code to correctly reset the timer without causing unnecessary re-renders or other side effects.
  • Understand why your solution works and how it addresses the issue with the useEffect dependencies.

Bonus

  • Abstract out the timer logic into a custom hook. An empty file useTimer.js has already been created for you!

Resources to Refer