The Project | About Us | Contribute | Donations | License
HOME My courses Completed
◄ Previous
◄

Hooks: Introduction and Basic Usage

Next ►
►

Introduction to Hooks

React Hooks are functions that let you use state and other React features without writing a class. They were introduced in React 16.8 and have since become a fundamental part of modern React development.

Key Concepts of Hooks

  1. State Hook (useState): Allows you to add state to functional components.
  2. Effect Hook (useEffect): Lets you perform side effects in functional components.
  3. Rules of Hooks: Guidelines to ensure hooks work correctly.

Why Use Hooks?

  • Simpler Code: Hooks allow you to use state and other features without writing classes.
  • Reusability: Custom hooks enable you to extract and reuse logic across components.
  • Cleaner Lifecycle Management: Hooks like useEffect provide a more intuitive way to handle side effects compared to class lifecycle methods.

Basic Usage of Hooks

State Hook (useState)

The useState hook allows you to add state to functional components.

Example

import React, { useState } from 'react';

function Counter() {
  // Declare a state variable named "count" with an initial value of 0
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

export default Counter;

Explanation

  • useState is called with the initial state (0 in this case).
  • It returns an array with two elements: the current state (count) and a function to update it (setCount).
  • The setCount function is called when the button is clicked, updating the state and re-rendering the component.

Effect Hook (useEffect)

The useEffect hook lets you perform side effects in functional components, such as data fetching, subscriptions, or manually changing the DOM.

Example

import React, { useEffect, useState } from 'react';

function DataFetcher() {
  const [data, setData] = useState(null);

  useEffect(() => {
    // Fetch data from an API
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => setData(data));
  }, []); // Empty array means this effect runs once after the initial render

  return (
    <div>
      {data ? <p>Data: {data}</p> : <p>Loading...</p>}
    </div>
  );
}

export default DataFetcher;

Explanation

  • useEffect is called with a function that performs the side effect (fetching data in this case).
  • The second argument is an array of dependencies. An empty array means the effect runs only once after the initial render.
  • When the data is fetched, setData updates the state, causing the component to re-render with the new data.

Rules of Hooks

  1. Only Call Hooks at the Top Level: Don’t call hooks inside loops, conditions, or nested functions. Always use hooks at the top level of your React function.
  2. Only Call Hooks from React Functions: Call hooks from React functional components or custom hooks, not from regular JavaScript functions.

Practical Exercise

Exercise: Counter with useState

Create a simple counter component that increments and decrements a count value.

Instructions

  1. Create a new functional component named Counter.
  2. Use the useState hook to manage the count state.
  3. Add two buttons: one to increment the count and one to decrement it.
  4. Display the current count value.

Solution

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <button onClick={() => setCount(count - 1)}>Decrement</button>
    </div>
  );
}

export default Counter;

Common Mistakes

  • Forgetting to Initialize State: Always provide an initial state value when using useState.
  • Incorrect Dependency Array in useEffect: Ensure the dependency array in useEffect includes all variables that the effect depends on.

Conclusion

In this section, we introduced React Hooks and covered the basics of useState and useEffect. Hooks provide a powerful way to use state and side effects in functional components, making your code more concise and easier to understand. In the next module, we will dive deeper into more advanced hooks and their usage.

◄ Previous
◄
Next ►
►

React Course

Module 1: Introduction to React

Module 2: React Components

Module 3: Working with Events

Module 4: Advanced Component Concepts

Module 5: React Hooks

Module 6: Routing in React

Module 7: State Management

Module 8: Performance Optimization

Module 9: Testing in React

Module 10: Advanced Topics

Module 11: Project: Building a Complete Application

The Project | About Us | Contribute | Donations | License
© Copyright 2024. All rights reserved