Hooks: An introduction to React hooks, including useState and useEffect.

React hooks are a new feature that allows developers to use state and other React features without writing a class. Hooks are functions that let you “hook into” React state and lifecycle features from function components. With hooks, you can use state and other React features without writing a class, which can simplify your code and make it easier to work with React.

One of the most commonly used hooks is useState. This hook allows you to add state to your functional components. It takes one argument, which is the initial state, and returns an array with two items: the current state and a function to update it. You can then manipulate the state using this function, which will trigger a re-render of your component with the updated state. This allows you to create dynamic and interactive components without needing to use classes.

Here is an example of how to use useState:

import React, { useState } from 'react';

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

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

In this example, we’re creating a Counter component that uses the useState hook to keep track of the number of times a button is clicked. The count variable is initialized to 0, and the setCount function is used to update its value whenever the button is clicked. The current value of count is then displayed in the p tag.

Another commonly used hook is useEffect. This hook allows you to perform side effects in your functional components. Side effects include things like fetching data, setting up subscriptions, and manually changing the DOM.

Here is an example of how to use useEffect:

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

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

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  }, [count]);

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

In this example, we’re using useEffect to update the document title whenever the count state changes. The function passed to useEffect is executed every time the component is rendered, but we pass [count] as a second argument to ensure that it only runs when the count state changes. This is called a dependency array, and it allows you to control when useEffect runs.

Overall, React hooks are a powerful tool that can simplify your code and make it easier to work with React. With hooks like useState and useEffect, you can easily add state and side effects to your functional components. Using hooks can also help you write more reusable and composable code, since you can extract common logic into custom hooks.