What are React Hooks and how do I use them?

What are React Hooks and how do I use them?

React Hooks are functions that let you use state and other React features in functional components. They allow you to manage state, lifecycle events, and more without writing a class.

Can you give me an example of using the useState hook?

Sure! Here's a simple example:

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>
  );
}

This code creates a counter that increments when you click the button.

What other hooks are there besides useState?

Other commonly used hooks include useEffect for managing side effects, useContext for accessing context, and useReducer for state management similar to Redux.

How do I manage side effects with useEffect?

You can use useEffect to perform side effects like data fetching or subscriptions. It takes a function as the first argument and an array of dependencies as the second. For example:

useEffect(() => {
  // Your side effect code here
}, [dependencies]);