naveensingh.dev

Joy of React Module 3

Written on 11-Nov-2023

Table of Contents


In this blog, I am going to summarize about what i learned from the course of joy of react on the Module 3, Module 3 is about the react hooks,


1. What is Hook and what does it do

Hook is kind of tool that helps you hold the grip in the something, Same as like in the react its holds some kind of grip which will be helpful

Every hook has its own different tradeoff

  • The hook is used to solve the different discrete problems,
  • Cool thing about hook that they allow us to reuse business login
  • Hooks are an incredible addition to react

2. Rules of Hook

There are two “Rules of Hooks” that we should follow in order to use the hook

  • hook should be called scope of a react application, It should not call outside of react application
  • Hook should call top level of component

3. useId Hook

Core idea of react components is resuable, We should be able to render multiple instances of just about any component without anything blowing u

function loginForm(){
   const id = React.useId();
}

4. useRef Hook

In order to work with the HTML canvas, We can use refs attribute, Which it start rendering a , When you component want to remember some information, but don't want information to trigger on new render

import { useRef } from 'react';
const ref = useRef(0); // Calling initial value
export default function Counter(){
  let ref = useRef(0);
  function handleClick(){
    ref.current = ref.current + 1;
  }
  return(
    <button onClick={handleClick}>Click Me</button>
  ):
}

5. SideEffects

Side effects is about managing effects happening from the application and its things like,

  1. Making Network Request
  2. Listening Events
  3. Timeout / Interval
  4. localstorage

In the react we called it as side effect and there is an specific hook to manage this side effect useEffect

// Example for useEffect 

import React from 'react';
import { useEffect } from 'react';

const [count,setCount] = React.useState(false);
function sideEffectExample{
  React.useEffect(() => {
    // Effect logic goes here
  }, []);
  return(
    <div>Shall We Begin </div>
  );
}