Hooks || how to use of hooks in react.js

#webdev #javascript #programming #react

React Hooks are build-in functions that allow you to use state and React features, like lifecycle methods and context, in functional components without needing to write a class component.

code:


import React, (useState) from 'react';

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

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

2. useEffect

This hook lets you perform side effects in functional components. it is a close replacements for componentDidMount, componentDidupdate, and componentwillunmount in class components

code:

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

function counter() {
    const [count, setCount] = useState(0);
    useEffect(() => {
        documc.title = 'you clicked ${count} time ';
        return () => {
            Document.title ='react App';
        };



    },[count]);
    return (
        <div>
            <p>You clicked {count} times</p>
                        <button onClick={() => setCount(coun 
                        + 1)}>click me </button>
            </div>

    );
}

3. useContext

This Hook lets you subscribe to React context without introducing nesting. it accepts a context object and returns the current context value for that context.

import React,{useContext} from 'react';
const ThemeContext = React.createContext('light');


 function Themebutton() {
     const Theme = useContext(ThemeContext);

  return<button theme={theme}> i am style by theme 
         context</button>;
 }

4. useReducer

An alternative to useState. Accepts a reducer of type (sate, action) => newState and returns the current State paired with a dispatch method.
Example:

it is particularly useful when the state logic is complex and involves multiple sub-value, or when the next state depends on the previous one. useReducer is an alternative to useState.

while useState is great for handling independent pieces of state useReducer excels at handling more complex, interconnected state that involves multiple changes in an atomic and predicable manner.

code:

import React, { useReducer } from 'react';
const initialState = { count: 0 };
function reducer  (state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
              case 'decrement':
      return { count: state.count - 1 };
        default:
        throw new Error();
  }
}
function Counter  () {
  const [state, dispatch] = useReducer(reducer, initialState);
  return (
    <div>
      Count: {state.count}
      <button onClick={() => dispatch({ type: 'increment'
       })}>Increment</button>
      <button onClick={() => dispatch({ type: 'decrement' 
       })}>Decrement</button>
    </div>
  );
};

5. useRef

This Hook creates a mutable ref object whose current property in initialized to the passed argument. it is handy for keeping any mutable value around similar to how you did use instance fields in class.

import React, { useRef } from 'react';

function MyComponent() {
  const inputRef = useRef(null);
  const focusInput = () => {
    inputRef.current.focus();
  };

  return (
    <div>
      <input ref={inputRef} type="text" />
      <button onClick={focusInput}>Focus Input</button>
    </div>
  );
}