Back to Blog
Getting Started with React Hooks
ReactJavaScriptWeb Development

Getting Started with React Hooks

2023-06-15 • Jahin Utsho

Getting Started with React Hooks



React Hooks were introduced in React 16.8 as a way to use state and other React features without writing a class. They allow you to "hook into" React state and lifecycle features from function components.

Why Hooks?



Hooks solve several problems in React:

  • It's hard to reuse stateful logic between components
  • Complex components become hard to understand
  • Classes confuse both people and machines

    The Basic Hooks



    useState



    The useState hook lets you add state to functional components:

    jsx
    • import React, { useState } from 'react';

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

    return (

    You clicked {count} times

    ); }

    useEffect



    The useEffect hook lets you perform side effects in function components:

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

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

      // Similar to componentDidMount and componentDidUpdate:
  useEffect(() => {
    // Update the document title using the browser API
    document.title = You clicked ${count} times;
  });

      return (
    
    
      
    You clicked {count} times
    
      
    
    
  );
}


    Rules of Hooks



    1. Only call Hooks at the top level. Don't call Hooks inside loops, conditions, or nested functions. 2. Only call Hooks from React function components. Don't call Hooks from regular JavaScript functions.

    Custom Hooks



    Building your own Hooks lets you extract component logic into reusable functions.

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

    function useFetch(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

      useEffect(() => {
    async function fetchData() {
      try {
        const response = await fetch(url);
        const data = await response.json();
        setData(data);
        setLoading(false);
      } catch (error) {
        setError(error);
        setLoading(false);
      }
    }

        fetchData();
  }, [url]);

      return { data, loading, error };
}


    Hooks are a powerful addition to React that make it easier to write and maintain React components. They allow you to reuse stateful logic without changing your component hierarchy.

    Related Posts