In Feb 2019
React hooks were introduced to react community
(React 16.8).
This new react feature solves one of the biggest problems faced by every react developers.
You can skip the problem section but it'll be good to know about what motivated React developers to bring hooks to the React.
Problems
- Render props - Before Hooks, functional components were stateless due to which
state needs to be passed to the functional component through props
and if the application istoo large
then thedrilling of props
was one of theobstacle
developers need to go through. - High order component - HOC wraps the component to give extra power like state but it also creates
wrap hell
as the application scale and application become too abstracted.
Let's explore Hooks now 💥
Hooks
Hooks is just a group of functions which Provide extra features to the Functional component by hooking to the core feature of react.
like State useState()
, Lifecycle useEffect()
useState
useState()
is a hook function which enable developers to use State in functional component.
import
import {useState} from 'react'
usage of useState
const [stars , setStars] = useState(3)
- stars hold the initial value 3 is just like the state with the initial value.
- setStars is the function which will set the stars like the this.setState.
- useState receive initial value.
We can set multiple states variable by using useState again and again.
const [stars , setStars] = useState(3)
const [movie , setMovie] = useState("The martian")
const [userInfo , setUserInfo] =useState({
userName:"john",
email: "john@example.com"
})
Example of useState
import React, { useState } from "react";
import "./styles.css";
export default function App() {
const [stars, setStars] = useState(3);
return (
<div className="App">
<h1>Welcome to netflix </h1>
<h2>The Martian</h2>
<button onClick={() => setStars(stars + 1)}>Change Rating</button>
<h1>{stars}⭐</h1>
</div>
);
}
Output
setStars set the value of the star by incrementing one to the previous value. So every time you click the button the stars
increment.
Thus useState lets you to change and set state for functional component.
Every time we set a new state value the component rerender.
useEffect
useEffect()
is a hook function which enable developers to use group of lifecycle method like
componentDidMount ( ) , componentDidUpdate( ) , componentWillUnmount() in functional component.
import
import {useState , useEffect } from 'react'
useEffect runs after every render and most of the side effects (Like Network Request , subscription) are performed under this function.
useEffect(()=>{
// network requests
}
,[ ])
useEffect( ) has two parameters , function and Array variable.
function contains the code which you want to execute after
every render.Array contains a state variable names for which you want to run the useEffect.
Since the useEffect() functions are run on every subsequent re-render/update, we can tell React to skip a run, for performance purposes, by adding a second parameter which is an array that contains a list of state variables to watch for. React will only re-run the side effect if one of the items in this array changes.
Lot of English lets understand useEffect
through code.
In this example, we will make a simple bookmark app.
This app will get a post from the API and the user can bookmark it.
Thats it! small app :).
import React, { useState, useEffect } from "react";
import "./styles.css";
export default function App() {
const [post, setPost] = useState("");
const [status, setStatus] = useState("Requesting....");
const [display, setDisplay] = useState("none");
useEffect(() => {
fetch("https://jsonplaceholder.typicode.com/todos/1")
.then((response) => response.json())
.then((json) => {
setPost(json.title);
setStatus("Recieved");
setDisplay(" ");
})
.catch((err) => {
setStatus("Error");
});
});
return (
<div className="App">
<p>{status}</p>
<p>{post}</p>
<button style={{ display: `${display}` }}>BookMark</button>
</div>
);
}
Thats lot of code right ?
Lets understand this in pieces.
State part
we have 3 state variable in this small app
const [post, setPost] = useState("");
const [status, setStatus] = useState("Requesting....");
const [display, setDisplay] = useState("none");
-
Post
will be used to store the post received from api -
status
is basically used to keep track of the request status (Requesting or Received). -
display
will be used to toggle the display of bookmark button.
Jsx part
<div className="App">
<p>{status}</p>
<p>{post}</p>
<button style={{ display: `${display}` }}>BookMark</button>
</div>
status of request and post will be displayed on the page along with button.
useEffect part
useEffect(() => {
fetch("https://jsonplaceholder.typicode.com/posts/1")
.then((response) => response.json())
.then((json) => {
setPost(json.title);
setStatus("Recieved");
setDisplay(" ");
})
.catch((err) => {
setStatus("Error");
});
});
As we know, use effect is basically used to perform side Effect (API request). So it's obvious that we will make our API request in the useEffect function.
-
fetch
will get the post for us from API - As soon as we retrieve our post, setStatus will set the status
to
setStatus(received)
and the display of our button will be toggled throughsetDisplay(" ")
. - In any case, if we have any error in between the process the
catch()
will be executed further setting the status toError
;
Now our little useEffect application is complete.
I hope this article somehow helped you to understand the basic concepts of hooks 😄.
There's a lot more about hooks, so please go through the official react hooks docs too.
Top comments (0)