<\/a> useState()<\/code><\/h2>\n\n\n\nuseState<\/code> hook provides you with functionality to set state for a variable and automatically update the DOM with the new state<\/p>\n\n\n\n![\"setState\"\/](\"https:\/\/res.cloudinary.com\/practicaldev\/image\/fetch\/s--A7Jwp7ok--\/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880\/https:\/\/dev-to-uploads.s3.amazonaws.com\/uploads\/articles\/jsl13pstnw6e3sqn9exk.png\")
<\/a><\/figure>\n\n\n\n<\/a> how to import :<\/h3>\n\n\n\nimport React, {useState} from \"react\";\n\/\/ or \nReact.useState;\n<\/code><\/pre>\n\n\n\n<\/a> example useState<\/code><\/h3>\n\n\n\nimport React, { useState } from 'react'\n\nlet count1 = 0;\n\nfunction App() {\n\n const [count, setCount] = useState(0);\n\n let count2 = 0;\n\n return (\n <div className='container mt-3'>\n <h3>Hello World to React Hooks<\/h3>\n\n <h4>Count : {count}<\/h4>\n <h4>Count1 : {count1}<\/h4>\n <h4>Count2 : {count2}<\/h4>\n\n <button className='btn btn-info' onClick={() => {\n setCount(count + 1);\n\n console.log(`count : ${count} | count1 : ${count1} count2 :${count2}`);\n\n count1 = count1 + 1;\n count2 = count2 + 1;\n }} >Add here<\/button>\n <\/div>\n )\n}\n\nexport default App\n<\/code><\/pre>\n\n\n\n![\"react_setState\"\/](\"https:\/\/res.cloudinary.com\/practicaldev\/image\/fetch\/s--tksMUwcg--\/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880\/https:\/\/dev-to-uploads.s3.amazonaws.com\/uploads\/articles\/3g145sn0y75qvcvx4dkl.png\")
<\/a><\/figure>\n\n\n\nIn this code snippet, count<\/code> and count1<\/code> will be updated both as variable as well in DOM<\/code>. But count2<\/code> will always be 1 (because of +1 operation in button.onClick<\/code> ) as whenever any data is changed in a react component, the whole component is re rendered. This is the reason why components exists.<\/p>\n\n\n\nNow you may ask, we can declare variables in global state and not use useState<\/code>. Well declaring global variables in all programming languages are considered as bad practice except for some cases. Refer :<\/p>\n\n\n\n- https:\/\/www.tutorialspoint.com\/why-are-global-variables-bad-in-c-cplusplus<\/a><\/li>
- https:\/\/dev.to\/mervinsv\/why-global-variables-are-bad-4pj<\/a><\/li><\/ul>\n\n\n\n
useState<\/code> provides a consistent state without even if the component re renders.<\/p>\n\n\n\n<\/a> useState<\/code> for objects<\/h3>\n\n\n\nimport React, { useState } from 'react'\n\nfunction App() {\n\n const [{ counter1, counter2 }, setCounter] = useState({ counter1: 0, counter2: 20 })\n\n return (\n <div className='container mt-3'>\n <div className='container'>\n\n <h3>Counter1 : {counter1}<\/h3>\n <h3>Counter2 : {counter2}<\/h3>\n\n{\/* this doesnt not work becuz whenever you update state, you need to update the whole object *\/}\n{\/* Over here, we havent included the counter2 in the setCounter function. *\/}\n\n <button className=\"btn btn-primary\" onClick={() =>\n setCounter(currentState => ({ counter1: currentState.counter1 + 1 }))}>Add<\/button> \n\n{\/* this will also not work because spread operator in objects comes first \n unlike in functions, where spread operator comes last. *\/}\n\n{\/* Correct Code *\/}\n <button className=\"btn btn-danger\" onClick={() => setCounter(currentState => ({\n ...currentState, \n counter1: currentState.counter1 - 1,\n }))}>Subtract<\/button\n\n <\/div>\n <\/div>\n )\n}\n\nexport default App;\n<\/code><\/pre>\n\n\n\n<\/a> Another Example useState()<\/code><\/h3>\n\n\n\nimport React, { useState } from \"react\";\n\nfunction App() {\n\n const [name, setName] = useState(localStorage.getItem(\"name\") || \"\");\n\n return (\n <div className=\"App\">\n\n <div className=\"container mt-3\">\n <input name=\"name\" value={name} onChange={e => {\n setName(e.target.value)\n localStorage.setItem(\"name\", e.target.value)\n }} className='form-control' \/>\n\n <h3>Name : {name}<\/h3>\n <\/div>\n\n <\/div >\n );\n}\n\nexport default App;\n<\/code><\/pre>\n\n\n\n<\/a> useEffect()<\/code><\/h2>\n\n\n\n- executes every time a component is rendered<\/li>
useEffect<\/code> when passed no dependency works as componentDidMount<\/code><\/li>- return arrow function from
useEffect<\/code> is a clean up function<\/li>- many
useEffect<\/code> hook can co exists in one component<\/li><\/ul>\n\n\n\nimport React, { useState, useEffect } from \"react\";\nimport HelloWorld from \".\/component\/HelloWorld\";\n\nfunction App() {\n\n const [count, setCount] = useState(0);\n const [showComp, setComp] = useState(false);\n\n useEffect(() => {\n console.log(\"Rendering ...\")\n })\n\n return (\n <div className=\"App\">\n\n <br \/>\n\n <div className='container mt-3'>\n <h3>Count : {count}<\/h3>\n <button className=\"btn btn-primary\" onClick={() => setCount(count + 1)}>Add<\/button> \n <\/div>\n\n <br \/>\n\n <div className='container'>\n <button onClick={() => setComp(!showComp)} className=\"btn btn-info\"> toggle <\/button>\n {showComp && <HelloWorld \/>}\n <\/div>\n\n <\/div >\n );\n}\n\nexport default App;\n\n\/\/ in src\/component\/HelloWorld.jsx\n\nimport React from 'react'\n\nfunction HelloWorld() {\n return (\n <div className='container mt-3'>\n <h2>HelloWorld component<\/h2>\n <\/div>\n )\n}\n\nexport default HelloWorld\n<\/code><\/pre>\n\n\n\n![\"useEffect\"\/](\"https:\/\/res.cloudinary.com\/practicaldev\/image\/fetch\/s--274EAbVG--\/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880\/https:\/\/dev-to-uploads.s3.amazonaws.com\/uploads\/articles\/1f4yu1galcj5knjmza21.png\")
<\/a><\/figure>\n\n\n\nRun the code and look at the console … Doesn’t matter whether you increment the counter or toggle the component, the whole component get re-render.<\/p>\n\n\n\n
To Stop this, modify useEffect<\/code> as following
<\/p>\n\n\n\nuseEffect(() => {\n console.log(\"Rendering ...\")\n}, [])\n<\/code><\/pre>\n\n\n\nNow the rendering will print on the console only when you refresh the page. Try modifying code as following
<\/p>\n\n\n\n
useEffect(() => {\n console.log(\"Rendering ...\")\n}, [count])\n<\/code><\/pre>\n\n\n\nNow the component will re render only when count is updated<\/p>\n\n\n\n
This is what useEffect<\/code> do, to only update \/ rendering the component when required. There is also a way to clean up the component. Try by modifying HelloWorld.jsx<\/code>
<\/p>\n\n\n\nimport React from 'react'\n\nfunction HelloWorld() {\n\n React.useEffect(() => {\n console.log('HelloWorld')\n return () => {\n console.log('GoodByeWorld')\n }\n }, [])\n\n return (\n <div className='container mt-3'>\n <h2>HelloWorld component<\/h2>\n <\/div>\n )\n}\n\nexport default HelloWorld\n\n\/\/ and App.jsx\n\nuseEffect(() => {\n console.log(\"Rendering ...\")\n},[])\n<\/code><\/pre>\n\n\n\nNow try to toggle switch, you the message with the component is loaded on DOM<\/code> and when its unmounting<\/code>. This works similiar to componentWillMount<\/code> and componentWillUnmount<\/code><\/strong><\/p>\n\n\n\n<\/a> useRef<\/code><\/h2>\n\n\n\nWhen you simply wants to put some html element or react component to focus<\/p>\n\n\n\n
Best try running this code
<\/p>\n\n\n\n
import React, { useRef } from \"react\";\n\nfunction App() {\n\n const inputRef = useRef();\n\n return (\n <div className=\"App\">\n\n <div className=\"container mt-3\">\n\n <input ref={inputRef} name=\"name\" value={name} onChange={e => {\n setName(e.target.value)\n localStorage.setItem(\"name\", e.target.value)\n }}\n className='form-control'\n \/>\n\n <br \/>\n\n <button onClick={() => {\n inputRef.current.focus();\n }} className=\"btn btn-success\" >Get focus<\/button>\n\n <\/div>\n\n <\/div>\n );\n}\n\nexport default App;\n<\/code><\/pre>\n\n\n\n![\"useref\"\/](\"https:\/\/res.cloudinary.com\/practicaldev\/image\/fetch\/s--Eo24E5Ot--\/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880\/https:\/\/dev-to-uploads.s3.amazonaws.com\/uploads\/articles\/mr9mutxul332jtv8z55h.png\")
<\/a><\/figure>\n\n\n\n<\/a> useReducer<\/code><\/h2>\n\n\n\nDiagram explains this hook the best<\/p>\n\n\n\n![\"userReducer\"\/](\"https:\/\/res.cloudinary.com\/practicaldev\/image\/fetch\/s--LnOvU1Gb--\/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880\/https:\/\/dev-to-uploads.s3.amazonaws.com\/uploads\/articles\/z2xe778c8wmq6ky87puw.png\")
<\/a><\/figure>\n\n\n\nimport React, { useReducer } from \"react\";\n\nfunction reducer(state, action) {\n switch (action.type) {\n case 'increment': return state + 1;\n case 'decrement': return state - 1;\n default: return state;\n }\n}\n\nfunction App() {\n\n const [count, dispatch] = useReducer(reducer, 0);\n\n return (\n <div className=\"App\">\n\n <div className='container' >\n <h2> count : {count} <\/h2>\n <button onClick={() => dispatch({ type: 'increment' })} className='btn btn-primary' > increment <\/button>\n <button onClick={() => dispatch({ type: 'decrement' })} className='btn btn-danger' > increment <\/button>\n\n <\/div>\n\n <\/div >\n );\n}\n\nexport default App;\n<\/code><\/pre>\n\n\n\n<\/a> useContext<\/code><\/h2>\n\n\n\nDiagram explains this hook the best<\/p>\n\n\n\n![\"useContext\"\/](\"https:\/\/res.cloudinary.com\/practicaldev\/image\/fetch\/s--4-90U6vt--\/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880\/https:\/\/dev-to-uploads.s3.amazonaws.com\/uploads\/articles\/89igrqius1z6koje75ab.png\")
<\/a><\/figure>\n\n\n\n\/\/ App.js\nimport React from 'react'\nimport HelloWorld from \".\/components\/HelloWorld\"\nimport About from '.\/component\/About'\nimport { UserContext } from '.\/UserContext'\n\nfunction App() {\n return (\n <div>\n <UserContext.Provider value='super man'>\n <HelloWorld \/>\n <\/UserContext.Provider>\n <\/div>\n )\n}\n\nexport default App\n\n\/\/ Hello World component\n\nimport React, { useContext } from 'react'\nimport { UserContext } from '..\/UserContext'\n\nfunction HelloWorld() {\n\n const msg = useContext(UserContext);\n\n return (\n <div className='container mt-3'>\n <h3>HelloWorld component : {msg}<\/h3>\n <\/div>\n )\n}\n\nexport default HelloWorld\n\n\/\/ About component\n\nimport React, { useContext } from 'react'\nimport { UserContext } from '..\/UserContext'\n\nfunction About() {\n\n const msg = useContext(UserContext);\n\n return (\n <div className='container mt-3'>\n <h3>About component : {msg}<\/h3>\n <\/div>\n )\n}\n\nexport default About\n\n\/\/ Usercontext.js \n\nimport { createContext } from \"react\";\n\nexport const UserContext = createContext(null);\n<\/code><\/pre>\n\n\n\n<\/a> useMemo<\/code><\/h2>\n\n\n\nMemo or Memoization is when you remember the result on something instead of computing it again and again when needed (until not changed)<\/p>\n\n\n\n
useMemo<\/code> in react is used for functions that are expensive and we dont want them to run again and again. It is similar to useEffect<\/code> hook but used more for functions, whereas useEffect is used as managing state in component lifecycle, even tho they are very similiar.
<\/p>\n\n\n\nimport React from 'react'\n\nfunction expensivePhoneFunc (product) {\n console.log(\"expensivePhoneFunc\")\n return product[0];\n}\n\nfunction App() {\n\n let product = [{\n name: 'Phone XL',\n price: 100\n },\n {\n name: 'Phone Mini',\n price: 80\n },\n {\n name: 'Phone Standard',\n price: 60\n }]\n\n const [count , setCount] = React.useState(0);\n\n const expensivePhone = React.useMemo( () => {\n return expensivePhoneFunc(product);\n },[])\n\n return (\n <div className='container mt-3'>\n <h3>Product : {expensivePhone.name}<\/h3>\n <h4>Price : {expensivePhone.price}<\/h4>\n <br \/>\n <h3>Count : {count}<\/h3>\n <button className='btn btn-primary' onClick={() => setCount(count + 1)}>+<\/button>\n <\/div>\n )\n}\n\nexport default App\n<\/code><\/pre>\n\n\n\n<\/a> useCallback<\/code><\/h2>\n\n\n\nIt is the useMemo<\/code> alternative but for functions, rather than the result returned from them. Instead of running the function again and again. Its is mostly used along with useMemo.
<\/p>\n\n\n\nimport React, {useCallback} from 'react'\nimport HelloWorld from '.\/component\/HelloWorld'\n\nfunction App() {\n\n const [count, setCount] = React.useState(0);\n\n const increment = useCallback(() => {\n setCount(c => c + 1);\n }, [setCount]);\n\n\n return (\n <div>\n <HelloWorld increment={increment} \/>\n <h3>Count : {count}<\/h3>\n <\/div>\n )\n}\n\nexport default App\n\n\/\/ HelloWorld.jsx\n\nimport React from 'react'\n\nconst HelloWorld = React.memo(({ increment }) => {\n\n console.log(\"hello\")\n\n return (\n <div className='container mt-3'>\n <h3>HelloWorld component<\/h3>\n <button onClick={increment}>Hello World<\/button>\n <\/div>\n )\n})\n\nexport default HelloWorld\n<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"What are Hooks React hooks are like Anchor ( same as what ships drop in the ocean to attach the ship and ocean floor) between React state (ocean floor) and life-cycle features ( ship ) of functional components.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[30],"tags":[65,140],"_links":{"self":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts\/2307"}],"collection":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2307"}],"version-history":[{"count":1,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts\/2307\/revisions"}],"predecessor-version":[{"id":2308,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts\/2307\/revisions\/2308"}],"wp:attachment":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2307"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2307"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2307"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
In this code snippet, Now you may ask, we can declare variables in global state and not use Run the code and look at the console … Doesn’t matter whether you increment the counter or toggle the component, the whole component get re-render.<\/p>\n\n\n\n To Stop this, modify Now the rendering will print on the console only when you refresh the page. Try modifying code as following Now the component will re render only when count is updated<\/p>\n\n\n\n This is what Now try to toggle switch, you the message with the component is loaded on When you simply wants to put some html element or react component to focus<\/p>\n\n\n\n Best try running this code Diagram explains this hook the best<\/p>\n\n\n\n Diagram explains this hook the best<\/p>\n\n\n\n Memo or Memoization is when you remember the result on something instead of computing it again and again when needed (until not changed)<\/p>\n\n\n\n It is the What are Hooks React hooks are like Anchor ( same as what ships drop in the ocean to attach the ship and ocean floor) between React state (ocean floor) and life-cycle features ( ship ) of functional components.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[30],"tags":[65,140],"_links":{"self":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts\/2307"}],"collection":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2307"}],"version-history":[{"count":1,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts\/2307\/revisions"}],"predecessor-version":[{"id":2308,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts\/2307\/revisions\/2308"}],"wp:attachment":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2307"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2307"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2307"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}useState<\/code> hook provides you with functionality to set state for a variable and automatically update the DOM with the new state<\/p>\n\n\n\n<\/a><\/figure>\n\n\n\n<\/a> how to import :<\/h3>\n\n\n\n
import React, {useState} from \"react\";\n\/\/ or \nReact.useState;\n<\/code><\/pre>\n\n\n\n<\/a> example
useState<\/code><\/h3>\n\n\n\nimport React, { useState } from 'react'\n\nlet count1 = 0;\n\nfunction App() {\n\n const [count, setCount] = useState(0);\n\n let count2 = 0;\n\n return (\n <div className='container mt-3'>\n <h3>Hello World to React Hooks<\/h3>\n\n <h4>Count : {count}<\/h4>\n <h4>Count1 : {count1}<\/h4>\n <h4>Count2 : {count2}<\/h4>\n\n <button className='btn btn-info' onClick={() => {\n setCount(count + 1);\n\n console.log(`count : ${count} | count1 : ${count1} count2 :${count2}`);\n\n count1 = count1 + 1;\n count2 = count2 + 1;\n }} >Add here<\/button>\n <\/div>\n )\n}\n\nexport default App\n<\/code><\/pre>\n\n\n\n<\/a><\/figure>\n\n\n\ncount<\/code> and count1<\/code> will be updated both as variable as well in DOM<\/code>. But count2<\/code> will always be 1 (because of +1 operation in button.onClick<\/code> ) as whenever any data is changed in a react component, the whole component is re rendered. This is the reason why components exists.<\/p>\n\n\n\nuseState<\/code>. Well declaring global variables in all programming languages are considered as bad practice except for some cases. Refer :<\/p>\n\n\n\nuseState<\/code> provides a consistent state without even if the component re renders.<\/p>\n\n\n\n<\/a>
useState<\/code> for objects<\/h3>\n\n\n\nimport React, { useState } from 'react'\n\nfunction App() {\n\n const [{ counter1, counter2 }, setCounter] = useState({ counter1: 0, counter2: 20 })\n\n return (\n <div className='container mt-3'>\n <div className='container'>\n\n <h3>Counter1 : {counter1}<\/h3>\n <h3>Counter2 : {counter2}<\/h3>\n\n{\/* this doesnt not work becuz whenever you update state, you need to update the whole object *\/}\n{\/* Over here, we havent included the counter2 in the setCounter function. *\/}\n\n <button className=\"btn btn-primary\" onClick={() =>\n setCounter(currentState => ({ counter1: currentState.counter1 + 1 }))}>Add<\/button> \n\n{\/* this will also not work because spread operator in objects comes first \n unlike in functions, where spread operator comes last. *\/}\n\n{\/* Correct Code *\/}\n <button className=\"btn btn-danger\" onClick={() => setCounter(currentState => ({\n ...currentState, \n counter1: currentState.counter1 - 1,\n }))}>Subtract<\/button\n\n <\/div>\n <\/div>\n )\n}\n\nexport default App;\n<\/code><\/pre>\n\n\n\n<\/a> Another Example
useState()<\/code><\/h3>\n\n\n\nimport React, { useState } from \"react\";\n\nfunction App() {\n\n const [name, setName] = useState(localStorage.getItem(\"name\") || \"\");\n\n return (\n <div className=\"App\">\n\n <div className=\"container mt-3\">\n <input name=\"name\" value={name} onChange={e => {\n setName(e.target.value)\n localStorage.setItem(\"name\", e.target.value)\n }} className='form-control' \/>\n\n <h3>Name : {name}<\/h3>\n <\/div>\n\n <\/div >\n );\n}\n\nexport default App;\n<\/code><\/pre>\n\n\n\n<\/a>
useEffect()<\/code><\/h2>\n\n\n\nuseEffect<\/code> when passed no dependency works as componentDidMount<\/code><\/li>useEffect<\/code> is a clean up function<\/li>useEffect<\/code> hook can co exists in one component<\/li><\/ul>\n\n\n\nimport React, { useState, useEffect } from \"react\";\nimport HelloWorld from \".\/component\/HelloWorld\";\n\nfunction App() {\n\n const [count, setCount] = useState(0);\n const [showComp, setComp] = useState(false);\n\n useEffect(() => {\n console.log(\"Rendering ...\")\n })\n\n return (\n <div className=\"App\">\n\n <br \/>\n\n <div className='container mt-3'>\n <h3>Count : {count}<\/h3>\n <button className=\"btn btn-primary\" onClick={() => setCount(count + 1)}>Add<\/button> \n <\/div>\n\n <br \/>\n\n <div className='container'>\n <button onClick={() => setComp(!showComp)} className=\"btn btn-info\"> toggle <\/button>\n {showComp && <HelloWorld \/>}\n <\/div>\n\n <\/div >\n );\n}\n\nexport default App;\n\n\/\/ in src\/component\/HelloWorld.jsx\n\nimport React from 'react'\n\nfunction HelloWorld() {\n return (\n <div className='container mt-3'>\n <h2>HelloWorld component<\/h2>\n <\/div>\n )\n}\n\nexport default HelloWorld\n<\/code><\/pre>\n\n\n\n<\/a><\/figure>\n\n\n\nuseEffect<\/code> as following
<\/p>\n\n\n\nuseEffect(() => {\n console.log(\"Rendering ...\")\n}, [])\n<\/code><\/pre>\n\n\n\n
<\/p>\n\n\n\nuseEffect(() => {\n console.log(\"Rendering ...\")\n}, [count])\n<\/code><\/pre>\n\n\n\nuseEffect<\/code> do, to only update \/ rendering the component when required. There is also a way to clean up the component. Try by modifying HelloWorld.jsx<\/code>
<\/p>\n\n\n\nimport React from 'react'\n\nfunction HelloWorld() {\n\n React.useEffect(() => {\n console.log('HelloWorld')\n return () => {\n console.log('GoodByeWorld')\n }\n }, [])\n\n return (\n <div className='container mt-3'>\n <h2>HelloWorld component<\/h2>\n <\/div>\n )\n}\n\nexport default HelloWorld\n\n\/\/ and App.jsx\n\nuseEffect(() => {\n console.log(\"Rendering ...\")\n},[])\n<\/code><\/pre>\n\n\n\nDOM<\/code> and when its unmounting<\/code>. This works similiar to componentWillMount<\/code> and componentWillUnmount<\/code><\/strong><\/p>\n\n\n\n<\/a>
useRef<\/code><\/h2>\n\n\n\n
<\/p>\n\n\n\nimport React, { useRef } from \"react\";\n\nfunction App() {\n\n const inputRef = useRef();\n\n return (\n <div className=\"App\">\n\n <div className=\"container mt-3\">\n\n <input ref={inputRef} name=\"name\" value={name} onChange={e => {\n setName(e.target.value)\n localStorage.setItem(\"name\", e.target.value)\n }}\n className='form-control'\n \/>\n\n <br \/>\n\n <button onClick={() => {\n inputRef.current.focus();\n }} className=\"btn btn-success\" >Get focus<\/button>\n\n <\/div>\n\n <\/div>\n );\n}\n\nexport default App;\n<\/code><\/pre>\n\n\n\n<\/a><\/figure>\n\n\n\n<\/a>
useReducer<\/code><\/h2>\n\n\n\n<\/a><\/figure>\n\n\n\nimport React, { useReducer } from \"react\";\n\nfunction reducer(state, action) {\n switch (action.type) {\n case 'increment': return state + 1;\n case 'decrement': return state - 1;\n default: return state;\n }\n}\n\nfunction App() {\n\n const [count, dispatch] = useReducer(reducer, 0);\n\n return (\n <div className=\"App\">\n\n <div className='container' >\n <h2> count : {count} <\/h2>\n <button onClick={() => dispatch({ type: 'increment' })} className='btn btn-primary' > increment <\/button>\n <button onClick={() => dispatch({ type: 'decrement' })} className='btn btn-danger' > increment <\/button>\n\n <\/div>\n\n <\/div >\n );\n}\n\nexport default App;\n<\/code><\/pre>\n\n\n\n<\/a>
useContext<\/code><\/h2>\n\n\n\n<\/a><\/figure>\n\n\n\n\/\/ App.js\nimport React from 'react'\nimport HelloWorld from \".\/components\/HelloWorld\"\nimport About from '.\/component\/About'\nimport { UserContext } from '.\/UserContext'\n\nfunction App() {\n return (\n <div>\n <UserContext.Provider value='super man'>\n <HelloWorld \/>\n <\/UserContext.Provider>\n <\/div>\n )\n}\n\nexport default App\n\n\/\/ Hello World component\n\nimport React, { useContext } from 'react'\nimport { UserContext } from '..\/UserContext'\n\nfunction HelloWorld() {\n\n const msg = useContext(UserContext);\n\n return (\n <div className='container mt-3'>\n <h3>HelloWorld component : {msg}<\/h3>\n <\/div>\n )\n}\n\nexport default HelloWorld\n\n\/\/ About component\n\nimport React, { useContext } from 'react'\nimport { UserContext } from '..\/UserContext'\n\nfunction About() {\n\n const msg = useContext(UserContext);\n\n return (\n <div className='container mt-3'>\n <h3>About component : {msg}<\/h3>\n <\/div>\n )\n}\n\nexport default About\n\n\/\/ Usercontext.js \n\nimport { createContext } from \"react\";\n\nexport const UserContext = createContext(null);\n<\/code><\/pre>\n\n\n\n<\/a>
useMemo<\/code><\/h2>\n\n\n\nuseMemo<\/code> in react is used for functions that are expensive and we dont want them to run again and again. It is similar to useEffect<\/code> hook but used more for functions, whereas useEffect is used as managing state in component lifecycle, even tho they are very similiar.
<\/p>\n\n\n\nimport React from 'react'\n\nfunction expensivePhoneFunc (product) {\n console.log(\"expensivePhoneFunc\")\n return product[0];\n}\n\nfunction App() {\n\n let product = [{\n name: 'Phone XL',\n price: 100\n },\n {\n name: 'Phone Mini',\n price: 80\n },\n {\n name: 'Phone Standard',\n price: 60\n }]\n\n const [count , setCount] = React.useState(0);\n\n const expensivePhone = React.useMemo( () => {\n return expensivePhoneFunc(product);\n },[])\n\n return (\n <div className='container mt-3'>\n <h3>Product : {expensivePhone.name}<\/h3>\n <h4>Price : {expensivePhone.price}<\/h4>\n <br \/>\n <h3>Count : {count}<\/h3>\n <button className='btn btn-primary' onClick={() => setCount(count + 1)}>+<\/button>\n <\/div>\n )\n}\n\nexport default App\n<\/code><\/pre>\n\n\n\n<\/a>
useCallback<\/code><\/h2>\n\n\n\nuseMemo<\/code> alternative but for functions, rather than the result returned from them. Instead of running the function again and again. Its is mostly used along with useMemo.
<\/p>\n\n\n\nimport React, {useCallback} from 'react'\nimport HelloWorld from '.\/component\/HelloWorld'\n\nfunction App() {\n\n const [count, setCount] = React.useState(0);\n\n const increment = useCallback(() => {\n setCount(c => c + 1);\n }, [setCount]);\n\n\n return (\n <div>\n <HelloWorld increment={increment} \/>\n <h3>Count : {count}<\/h3>\n <\/div>\n )\n}\n\nexport default App\n\n\/\/ HelloWorld.jsx\n\nimport React from 'react'\n\nconst HelloWorld = React.memo(({ increment }) => {\n\n console.log(\"hello\")\n\n return (\n <div className='container mt-3'>\n <h3>HelloWorld component<\/h3>\n <button onClick={increment}>Hello World<\/button>\n <\/div>\n )\n})\n\nexport default HelloWorld\n<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"