Hook naming conventions in React - Mini Project: Build & Apply

Hook Naming Conventions in React

📖 Scenario: You are building a simple React component that uses hooks to manage state and effects. To keep your code clear and follow React best practices, you need to name your hooks correctly.

🎯 Goal: Create a React functional component that uses hooks with proper naming conventions. You will define a state hook and an effect hook, each named following React's rules.

📋 What You'll Learn

Create a state hook with a name starting with use

Create an effect hook using useEffect

Name the custom hook function starting with use

Use functional component syntax with hooks

💡 Why This Matters

🌍 Real World

Naming hooks correctly helps React identify them and enables tools to work properly. It also makes code easier to read and maintain.

💼 Career

Understanding hook naming conventions is essential for React developers to write clean, reusable, and bug-free components.

1

Create a custom hook function

Create a custom hook function called useCounter that returns a number 0.

React

# Create a function called useCounter that returns 0
# Your code here

Need a hint?

Custom hooks must start with use and be functions.

2

Add a state hook inside the custom hook

Inside the useCounter function, create a state hook using useState with initial value 0. Name the state variable count and the setter setCount.

React

function useCounter() {
  // Use useState to create count and setCount
  // Your code here
}

Need a hint?

Use const [count, setCount] = useState(0) inside the function.

3

Create a functional component using the custom hook

Create a React functional component called CounterDisplay that calls the useCounter hook and stores its result in a variable named count.

React

import { useState } from 'react';

function useCounter() {
  const [count, setCount] = useState(0);
  return count;
}

// Create CounterDisplay component
// Your code here

Need a hint?

Define function CounterDisplay() and call useCounter() inside it.

4

Add an effect hook inside the component

Inside the CounterDisplay component, add a useEffect hook that runs once on mount. Use an empty dependency array []. The effect function can be empty.

React

import { useState, useEffect } from 'react';

function useCounter() {
  const [count, setCount] = useState(0);
  return count;
}

function CounterDisplay() {
  const count = useCounter();
  // Add useEffect hook here
  // Your code here
  return null;
}

Need a hint?

Use useEffect(() => { }, []) inside the component.