Intro to React hooks

➜ Hooks are the one of the important topics in the react. Hooks are used to make code simplier and easy to understand

➜ Hooks are a new addition in React 16.8. They let you use state and other React features without writing a class.

➜ Hooks are functions that let you “hook into” React state and lifecycle features from function components.

➜ Hooks let you use the react components without writing the class components

Before getting into useEffect chekout blog on What are hooks and useState explained with examples click here

useEffect

➜ we use useEffect because it use to perform the side effects in state components. The useEffect Hook allows us to replace repetitive component lifecycle code.

➜ side effects are mostly used to updating the DOM, and timeout functions .Examples of side-effects are fetch requests, manipulating DOM directly, using timer functions like setTimeout(), setInterval().

➜ useEffect use two components

useEffect(function, dependency)

➜ The function containing the side-effect logic , After being pushed to DOM function changes when DOM updated.

lets understand use By following example

➜ create a state component named 'count' and primarly named to value 'after 2 sec'

with useEffect hook we are setting the value to 'Hello world' using setCount. and setTimeout to get after 2sec

completion of two seconds the value 'after 2sec' changes to 'Hello world'

import React, { useState, useEffect } from 'react';
import "./style.css";

export default function App() {

  const[count, setCount] = useState('after 2 sec')

  useEffect(() => {
    const timer = setTimeout(() => {
      setCount('Hello world')
    },2000)
    return () => clearTimeout(timer);
    // "Effect cleanup to prevent memory leaks"
  }, [])

  return (
   <h1>{count}</h1>
  );
}

output:

'after 2 sec' changes to 'hello world' as you can see above using useEffect This is how useEffect used to update the state value after 2 sec by setTimeout.

Now Lets make a live window size on moving the window using useEffect

As we know already, To use the hooks first we need to import the hook from the react as we did above

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

Now create a state component called 'windowWidth' and its value is size of current window.

window.innerWidth is used to get current windowSize

const[windowWidth, setWindowWidth] = useState(window.innerWidth)

Now if you render you will get current window width

   <div>
      <h1> width of the current window: {windowWidth}</h1>
    </div>

output: -

➜ Now when we move along with the window the value should update automatically as we resize the window for that we add a useEffect hook to perform the operation

we can perform the opreation by adding eventListener to the window , here we go..

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

export default function App() {

  const[windowWidth,setWindowWidth] = useState(window.innerWidth)


  const windowSize = () => {
    setWindowWidth(window.innerWidth)
  }

  useEffect(() => {
    window.addEventListener('resize', windowSize)
  })

  return (
    <div>
      <h1> width of the current window: {windowWidth}</h1>
    </div>
  );
}

In the output we get the current size of the window by updating the current value of the window when we move along with the browser

Similarly we can do for the current height we just need to update the height instead of width and state to windowHeight, setWindowHeight and useEffect hook

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

export default function App() {

  const[windowWidth,setWindowWidth] = useState(window.innerWidth)
  const[windowHeight,setWindowHeight] = useState(window.innerHeight)


  const windowSize = () => {
    setWindowWidth(window.innerWidth)
  }

  useEffect(() => {
    window.addEventListener('resize', windowSize)
  })

   const windowSize2 = () => {
     setWindowHeight(window.innerHeight)  
  }

   useEffect(() => {
    window.addEventListener('resize', windowSize2)
  })

  return (
    <div>
      <h1> width of the current window: {windowWidth}</h1>
      <h1> current height: {windowHeight}</h1>
    </div>
  );
}