React Hooks with examples( useState, useEffect, useContext ).

Hey! Programmers. Have you ever thought about how React helps us in making a complicated site or an application ?. To develop a large scale application we need to handle a bunch of states and data throughout our application and this in result requires a complicated and well maintained but yet a fragile codebase. This Fragility of the codebase is kind of obvious due to many states and use cases remained UN-handled. To solve this problem React was made available and provided us with many advantages.

One of the main advantages of React framework after the component lifecycle methods is REACT HOOKS, think of it, as an abstract to reduce the code written while using class-based components and lifecycle methods.

• Reduces Code.
• Improves scalability.
• Provide a clear meaning to the data flow.

This post consists only useState, useEffect, useContext Hooks. So without wasting anyone time let's just jump right into understanding each of them together.

useState Hook

syntax:

const [state, setState] = useState(initialState);

terminology:

• state: the data that is inside the state and ready to be used.
• setState:: this helps in changing the state that is initially set to some value and ready to be manipulated via some functions or an event.
• initialState: The initial state that is set by default as a component renders which got change afterwards.

The complexity that can be increased to use useState

const [state, setState] = useState({
  array[], // array of string, object, number etc.
  object,  // object
  string,
  number
});

Examplar CODE :

import React, { useState } from "react";

function App() {
  const [like, setLike] = useState(0);

  return (
    <div>
      <h3>💜 : {like}</h3>
      <button onClick={() => setLike((liked) => liked + 1)}>
        Like 👍
      </button>
      <button onClick={() => setLike((liked) => liked - 1)}>
        unLike 👎
      </button>
      <button onClick={() => setLike(0)}>Reset</button>
    </div>
  );
}

export default App;

Explanation:

• The first statement is for importing the hook from react library.
• The 3 Rules to remember while using useState.

const [like, setLike] = useState(0);
//Rule 1: This statement means that initially like value is: 0
//Rule 2: After any event, we need to manipulate like using setLike.
//Rule 3: And log `like` to see the state change.

• The Code to increment likes. In this code, when onClick Event is trigerred we call setLike and increment the value by passing an iterator liked and incrementing liked state whenever user clicks to like button.

<h3>💜 : {like}</h3>
<button onClick={() => setLike((liked) => liked + 1)}>
  Like 👍
</button>

• The Code to decrement likes. In this code, when onClick Event is trigerred we call setLike and decrement the value by passing an iterator liked and decrementing liked state whenever user clicks to like button.

 </button>
 <button onClick={() => setLike((liked) => liked - 1)}>
  unLike 👎
</button>

• To RESET the state, i have just reset the state to 0 by calling setLike and explicitly returning 0.

<button onClick={() => setLike(0)}>Reset</button>

Screencasts:

This blogPost is short to help you digest what you have learned. Need to wait for useEffect and useContext. will link it soon.

Thanks for Reading.
Happy Coding.

Please Do Comment!

Dont's Stop Learning Next BlogPost.

Article No Longer Available

Comments

[Abdulaziz Almalki]

You promised but you didn't deliver.