Learn Basic Hooks in React
Tags: react, javascript, beginners, tutorial
Published: 2023-09-06 12:46:19

## Introduction

React Hooks revolutionized state management and side effects in functional components. They allow you to manage component state and lifecycle features without writing class components. In this comprehensive guide, we will explore the most commonly used React Hooks and even build a custom hook from scratch.

## Understanding React Hooks

React Hooks are functions that let you "hook into" React state and lifecycle features from function components. The most commonly used hooks are:

### 1\. `useState`

`useState` enables functional components to manage state. It takes an initial state as an argument and returns an array with the current state and a function to update it.

```javascript
import React, { useState } from 'react';

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

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}
```

### 2\. `useEffect`

`useEffect` allows you to perform side effects in your functional components. It runs after the component renders and can mimic `componentDidMount`, `componentDidUpdate`, and `componentWillUnmount` lifecycle methods.

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

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

  useEffect(() => {
    document.title = `Count: ${count}`;
  }, [count]);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}
```

### 3\. `useContext`

`useContext` allows you to access the context directly within a functional component. It's particularly useful for managing application-wide state.

```javascript
import React, { useContext } from 'react';

const MyContext = React.createContext();

function Example() {
  const contextValue = useContext(MyContext);

  return <div>{contextValue}</div>;
}
```

## Building a Custom Hook

Custom hooks allow you to reuse stateful logic across multiple components. Let's create a custom hook for handling form input:

```javascript
import { useState } from 'react';

function useFormInput(initialValue) {
  const [value, setValue] = useState(initialValue);

  function handleChange(e) {
    setValue(e.target.value);
  }

  return {
    value,
    onChange: handleChange,
  };
}
```

Now, you can use this custom hook in your components:

```javascript
function MyForm() {
  const username = useFormInput('');
  const password = useFormInput('');

  function handleSubmit() {
    console.log('Username:', username.value);
    console.log('Password:', password.value);
  }

  return (
    <div>
      <input type="text" {...username} placeholder="Username" />
      <input type="password" {...password} placeholder="Password" />
      <button onClick={handleSubmit}>Submit</button>
    </div>
  );
}
```

Custom hooks make it easy to share logic and stateful behaviour between components while keeping your code clean and maintainable.

## Conclusion

React Hooks have transformed the way we work with state and side effects in functional components. Understanding and using hooks like `useState`, `useEffect`, and `useContext` allows you to build more modular and efficient React applications.

Additionally, creating custom hooks empowers you to encapsulate and share complex logic across your components, enhancing code reusability and maintainability.

By mastering React Hooks and custom hooks, you'll be well-equipped to create powerful and efficient React applications.