React Coding Questions

Remember our question "Hooks: useState - 1" but that was in JavaScript. Try to migrate it to TypeScript.

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

Create a custom hook that tracks the hover state of an element. The hook should return a boolean value indicating whether the element is being hovered over. If no element is provided, the hook should track the hover state of the entire document.

This question revolves around the most frequently used hook in React development. Your task is to implement the logic for managing tasks - including storing, adding, and deleting them within a local state variable.

You would learn to build a modern reusable button component in React. We cover the same libraries used to also power ShadCN and other design systems.

Though modern React applications are built using function components, there are still many class components in the wild. You might need to refactor a class component to a function component for various reasons.

You built a Todo App and sent it to the testing team. They sent you a list of bugs. How do you proceed to fix them?

With this question, you will learn a weird thing about TypeScript that helps with better autocomplete.

Create a custom hook that tracks the mouse movement. The hook should return a boolean value indicating whether the mouse is moving. The hook should also provide the x and y coordinates of the mouse and update them on mouse move.

Create a custom hook that tracks the mouse position. The hook should return the x and y coordinates of the mouse and update them on mouse move, it should also give mouse position relative to a element.

A generic volume control hook. Can you use it to create a volume control for your music or video player?

There are a lot of onChange handlers in this question. How can you make it more readable and maintainable?

Remember our question "Hooks: useVolume" but that was in JavaScript. Try to migrate it to TypeScript.