You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
A hook is a React Component making a call to a specific function within your application
Also a hook is a function that lets hop into the State and lifecycle from a functional componet
Hooks are not operational within a class instead they allow us to use React features without having to create a new class
Every hook starts with the prefix "use"
When To Call A Hook
You only want to call a hook at the very high level. Do not call a hook
when it is a function within a function aka a nested function
when you are using a conditional
within a loop
Call A hook also from a React functional component NOT from a React regular JS function or a class Based Component
The useState Hook
Enables you to manage state within your functional component
The way its used is by passing as an argument the initial state to the function(useState) and it outputs the current state
However, another function must be present to update the value of the state because you must remember to never update the state directly
The useEffect Hook
This hook is used to perform side effects from a functional component
This hook is similar to the lifecycle methods: componentDidMount, componentDidUpdate, and componentWillUnmount
The useEffect is a postprocess hook meaning run the effect function AFTER you perform the changes to the DOM
This effect hook has access to the state and props because this hook is declared within the component
A useEffect is ran after we render to the DOM
The useMemo hook
This hook is used to increase performance in your application
useMemo is the process of using Memoization
Memoization is an optimization utility where I pass a complex function in order for it to be memoized
When using memoization the result is remembered whenever I pass in the same parameters in the future
Memoizing a computed value based on expensive calculations in a data-intensive app.
Without memoization
functioncompute(){return1+1}
With Memoization
//now thanks to memoization react is smart enough to not have to perform the calculation it will just output 2functioncompute(){return2;}
File1 Memo.js
importReact,{useState,useEffect,useMemo}from'react';/*Creating a function which will do data fetching aka make the api callThis function is essentially returning data from the API*/constfetchMyData=()=>{returnMath.random();}//function which will use my dataconsttheHeavyCalc=somedata=>{//if there is no data exit this functionif(!somedata){return}console.log('Computing some heavy function with the data',somedata);returnMath.floor(somedata*100)}exportdefaultfunctionMemo(){const[mycount,setMyCount]=useState(0);const[mydata,setmydata]=useState()console.log('Here is my app rendered to the dom with the mycount variable',mycount)useEffect(()=>{/* i am getting the data and storing it in the mydata variable then I pass mydata to the state */constmydata=fetchMyData();setmydata(mydata);},[])//const res = theHeavyCalc(mydata)/* we should only make the api call only once. Then why do we call the function again and again? If we already successfully made a calculation we do not have to perform the calculation again and again. The more difficult and complex your calculation is the more time it will take for your application to load I want to make the calculation only once when the component is mounted. To solve this problem I use the hook useMemo I resplay res variable with the useMemo hook which takes a callback function as an argument the second argument should be the dependencies and the first one is the callback */constres=useMemo(()=>theHeavyCalc(somedata),[somedata])return(<div><h1>The Number Counter</h1><p>Counter: {mycount}</p><p>The Result is: {res}</p><buttononClick={()=>setMyCount(mycount+1)}>
Increment
</button></div>)}
importReact,{useState}from'react';exportdefaultfunctionRef1(){const[count,setCount]=useState(0);/* I will use this hook to access the dom element The DOM element I will create must be within my div */constmyCounter=useRef(null)constincrement=()=>{setCount(count+1)console.log(myCounter);}/* I have an object with a current key. Thanks to the createRef I can access the current object using Current property. I have this current as a key which enables me to access the span dom element using current key Whenever I want to access the dom elements or its values I use the useRef Hook createRef will return a new reference on every render useRef however will return the same reference each time */return(<div>
Count<spanref={myCounter}>{count}</span><buttononClick={increment}>+</button></div>)}
How To Create a Custom Hook.. To tell React this is not a Functional Component, this is a custom hook I prefix the function name with the keyword use
importReact,{useState}from"react";exportdefaultfunctionuseCustomHook(){//iniitalizing numOfOrders to 0. Then the useState function will return the setNumOfOrder to change the value of my initial state(num of Orders) const[numOfOrders,setNumOfOrders]=useState({num: 0});constchangeNumOrder=()=>{setNumOfOrders({num: numOfOrders.num+1});}return{ numOfOrders, changeNumOrder}}
I goto my effect hook functional component
importReact,{useState,useEffect}from"react";//importing my custom hookimportuseCustomHook'./useCustomHook';//my custom hookconstbookOrder=useCustomHook();exportdefaultfunctionEffectHook(){return(<div><p>You Clicked Me {bookOrder.numOfOrders.num} number of times</p><buttononClick={bookOrder.changeNumOrder}>
Click Here
</button></div>)}