React Hooks

(Lesson 5.0) - React Hooks

What are React Hooks?

React Hooks are a set of functions introduced in React 16.8 that allow you to use state and lifecycle features in functional components, making it possible to write complete applications using only functional components. Hooks are designed to simplify state management and side effects in functional components, making them more maintainable and easier to understand.

useState Hook

The useState hook is a fundamental hook that allows you to add state to functional components. It takes an initial state value as an argument and returns an array with two elements: the current state value and a function to update the state.

Here's an example of using the useState hook:

import React, { useState } from 'react';

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

  const increment = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

useEffect Hook

The useEffect hook allows you to perform side effects, such as data fetching, subscriptions, or manual DOM manipulation, in functional components. It replaces the lifecycle methods componentDidMount, componentDidUpdate, and componentWillUnmount in class components. The useEffect hook takes a function and an optional array of dependencies as arguments. The function will be called whenever the specified dependencies change, and it can return a cleanup function that will be called when the component is unmounted or the dependencies change again.

Here's an example of using the useEffect hook:

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

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

  useEffect(() => {
    const fetchData = async () => {
      const response = await fetch(url);
      const data = await response.json();
      setData(data);
    };

    fetchData();
  }, [url]);

  // Render the fetched data
}

useContext Hook

The useContext hook allows you to access the value of a React context without using the Context.Consumer component. It takes a context object created by React.createContext() as an argument and returns the current context value. The useContext hook makes it easier to consume context values in functional components.

Here's an example of using the useContext hook:

import React, { useContext } from 'react';
const ThemeContext = React.createContext('light');

function ThemedButton() {
  const theme = useContext(ThemeContext);

  return (
    <button className={theme === 'light' ? 'light-theme' : 'dark-theme'}>
      Click me!
    </button>
  );
}

That covers this lesson in our React tutorial series. Continue exploring Whitewood Media & Web Development to learn more programming and tech knowledge!

Practice Questions

1. What is the purpose of the useState hook in functional components?
2. How does the useEffect hook replace the lifecycle methods in class components?
3. Explain the useContext hook and how it simplifies consuming context values in functional components.
4. Convert the following class component to a functional component using hooks:

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  increment = () => {
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={this.increment}>Increment</button>
      </div>
    );
  }
}

Answers and Explanations

1. The useState hook allows you to add state to functional components, enabling them to store and manage data that changes over time.
2. The useEffect hook replaces lifecycle methods in class components by allowing you to perform side effects in functional components based on an array of dependencies. It serves as a unified way to handle side effects that occur when the component mounts, updates, or unmounts.
3. The useContext hook simplifies consuming context values in functional components by taking a context object created by React.createContext() and returning the current context value directly. This eliminates the need for using the Context.Consumer component or render prop pattern.
4. Converted functional component using hooks:

import React, { useState } from 'react';

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

  const increment = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}