Day 8- Exploring React JS Hooks

Adding State and Other Features to Functional Components

ReactJS Hooks are a new feature introduced in React version 16.8. They allow you to add state and other React features to functional components, which were previously only available to class components. In this article, we will learn about the various hooks available in ReactJS and how they can be used to make functional components more powerful and versatile.

Hooks in ReactJS allow you to use state, lifecycle methods, and other React features in functional components without having to convert them to class components. The most common hooks used in ReactJS are:

1 . useState: This hook is used to manage state in functional components. It allows you to create and update state variables and re-render the component when the state changes. The useState hook takes an initial state value as an argument and returns an array with two elements — the current state value and a function to update the state.

Here is an example of how to use the useState hook:

import React, { useState } from 'react';
function Counter() {
  const [count, setCount] = useState(0);
  function increment() {
    setCount(count + 1);
  }
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

In this example, the useState hook is used to manage the count state variable. The count variable is initialized to 0, and the setCount function is used to update the count variable.

2 . useEffect: This hook is used to handle side effects, such as fetching data from an API or updating the document title. It runs after every render, and you can control when it should re-run by providing a dependency array. If the dependency array is empty, it will only run once.

Here is an example of how to use the useEffect hook:

import React, { useState, useEffect } from 'react';
function Example() {
  const [count, setCount] = useState(0);
  useEffect(() => {
    document.title = `Count: ${count}`;
  }, [count]);
  function increment() {
    setCount(count + 1);
  }
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

In this example, the useEffect hook is used to update the document title with the current count value. The effect will only re-run if the count value changes.

3. useContext: This hook is used to pass data between components without having to pass props down the component tree. It allows you to create a context that can be accessed by any component in the tree.

Here is an example of how to use the useContext hook:

import React, { useContext } from 'react';
const ThemeContext = React.createContext('light');
function ThemedButton() {
  const theme = useContext(ThemeContext);
  return <button className={theme}>Themed Button</button>;
}

In this example, the useContext hook is used to access the theme value from the ThemeContext. The theme value can be set in a parent component and will be available to any child component that uses the ThemedButton component.

4 . useRef: This hook is used to create a reference to a DOM element or a value that persists between renders. It is useful for accessing DOM elements, creating animations, and managing focus.

Here is an example of how to use the useRef hook:

import React, { useRef } from 'react';
function TextInput() {
  const inputRef = useRef(null);
  function focusInput() {
    inputRef.current.focus();
  }
  return (
    <div>
      <input type="text