Hooks@16.8 Cheat Sheet

A Programming › JavaScript cheat sheet in English by msalmanh

React 16.8 Includes Hooks this was the first version so far in the react history when hooks were first introduced .

5,893 views 1,147 downloads 15 Feb 2023 History

PRs

useState

State as Object:
The state is an object that holds information about a certain component.
Two Factor:
State change is one of the two things that make a React component re-render(the other is a change in props)
Behavior
The state stores information about the component and controls its behavior.
Updater Function
The setState() function is asynchronous .
Time Taken by Re-render
The time it takes for a component to render after a call to setState() depends upon the various factors, including the size and complexity of the component, the speed of the Computer or device and the amount of data being processed .
Optimization
It reduces unnecessary re-renders and updates only the components that have changed.

useEffect

Side Effects
Actions which are Unpredictable because they are performed with the outside world.
Meaning
Side Effects basically means something that happens after Some other specific thing happens.
Common Side Effects
1. Making a request to an API for data on back end server.
2.Interact with browser API e.g. use document or windows directly.
3.Using unpredictable timing functions like setTimeOut() or setInterval().
How
If we need to perform side effects it should be after the component renders.
useEffect
useEffect has one function(callback) and an array(dependency array)
Callback
Call back function will be called after the component renders. And this is the function which is used to perform our side effects .
Dependency Array
The dependencies array should include all of the values that our side Effect relies upon.
1. The array will cause the useState() to execute again if one of its variables changes
2.If provided incorrectly the array with the local state. this may cause an infinite loop.
CleanUp Function
When component unmounts this functions cleans up any changes made by effect.

useEffect and useState

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

function Example() {
  const [data, setData] = useState([]);

  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/posts')
      .then(response => response.json())
      .then(json => setData(json))
      .catch(error => console.error(error));
  }, []);

  return (
    <div>
      {data.map(post => (
        <div key={post.id}>
          <h2>{post.title}</h2>
          <p>{post.body}</p>
        </div>
      ))}
    </div>
  );
}

Comments

No comments yet.