What are React Hooks and how do they work?

What are React Hooks and how do they work?

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

Can you give me an example of a simple hook?

Sure! The useState hook is a simple example. It allows you to add state to a functional component. Here's how you can use it:

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

What are some other commonly used hooks?

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

Are there any rules I should follow when using hooks?

Yes, there are two main rules: 1) Only call hooks at the top level of your React function, and 2) Only call hooks from React functions, not regular JavaScript functions.