var Component=(()=>{var p=Object.create;var o=Object.defineProperty;var E=Object.getOwnPropertyDescriptor;var y=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,F=Object.prototype.hasOwnProperty;var m=(l,e)=>()=>(e||l((e={exports:{}}).exports,e),e.exports),f=(l,e)=>{for(var r in e)o(l,r,{get:e[r],enumerable:!0})},c=(l,e,r,s)=>{if(e&&typeof e=="object"||typeof e=="function")for(let a of y(e))!F.call(l,a)&&a!==r&&o(l,a,{get:()=>e[a],enumerable:!(s=E(e,a))||s.enumerable});return l};var g=(l,e,r)=>(r=l!=null?p(u(l)):{},c(e||!l||!l.__esModule?o(r,"default",{value:l,enumerable:!0}):r,l)),b=l=>c(o({},"__esModule",{value:!0}),l);var i=m((C,t)=>{t.exports=_jsx_runtime});var w={};f(w,{default:()=>h,frontmatter:()=>B});var n=g(i()),B={title:"Top reactjs questions asked in interview",description:"Frequently asked reactjs interview question",publishedAt:"2024-06-15",updatedAt:"2024-06-15",author:"GeeksMonk",isPublished:!0,tags:["react"]};function d(l){let e={a:"a",code:"code",figure:"figure",h2:"h2",h3:"h3",hr:"hr",li:"li",p:"p",pre:"pre",span:"span",strong:"strong",ul:"ul",...l.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(e.h2,{id:"what-is-react-js",children:["What is react Js?",(0,n.jsx)(e.a,{"aria-hidden":"true",tabIndex:"-1",href:"#what-is-react-js",children:(0,n.jsx)(e.span,{className:"icon icon-link"})})]}),` `,(0,n.jsx)(e.p,{children:`React is an open-source front-end JavaScript library that is used for building user interfaces, especially for single-page applications. It is used for handling view layer for web and mobile apps.`}),` `,(0,n.jsx)(e.hr,{}),` `,(0,n.jsxs)(e.h2,{id:"what-are-the-main-features-of-react",children:["What are the main features of react?",(0,n.jsx)(e.a,{"aria-hidden":"true",tabIndex:"-1",href:"#what-are-the-main-features-of-react",children:(0,n.jsx)(e.span,{className:"icon icon-link"})})]}),` `,(0,n.jsx)(e.p,{children:"The major features of React are:"}),` `,(0,n.jsxs)(e.ul,{children:[` `,(0,n.jsx)(e.li,{children:"React uses JSX syntax, a syntax extension of javascript that allows developers to write HTML in their JS code."}),` `,(0,n.jsx)(e.li,{children:"React uses Virtual DOM instead of RealDOM considering that RealDOM manipulations are expensive."}),` `,(0,n.jsx)(e.li,{children:"Supports server-side rendering."}),` `,(0,n.jsx)(e.li,{children:"React follows Unidirectional data flow or data binding."}),` `,(0,n.jsx)(e.li,{children:"Uses reusable/composable UI components to develop the view."}),` `,(0,n.jsx)(e.li,{children:"React can be used to build web as well as mobile application."}),` `]}),` `,(0,n.jsx)(e.hr,{}),` `,(0,n.jsxs)(e.h2,{id:"what-is-jsx",children:["What is JSX?",(0,n.jsx)(e.a,{"aria-hidden":"true",tabIndex:"-1",href:"#what-is-jsx",children:(0,n.jsx)(e.span,{className:"icon icon-link"})})]}),` `,(0,n.jsxs)(e.p,{children:[`JSX is a XML-like syntax extension to ECMAScript. Basically it just provides syntactic sugar for the `,(0,n.jsx)(e.strong,{children:"React.createElement()"}),` function, giving us expressiveness of JavaScript along with HTML like template syntax.`]}),` `,(0,n.jsx)(e.figure,{"data-rehype-pretty-code-figure":"",children:(0,n.jsx)(e.pre,{style:{backgroundColor:"#24292e",color:"#e1e4e8"},tabIndex:"0","data-language":"js","data-theme":"github-dark",children:(0,n.jsxs)(e.code,{"data-language":"js","data-theme":"github-dark",children:[(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"export"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" default"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" function"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" App"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"() {"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" return"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#85E89D"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#85E89D"},children:"h1"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:">Welcome to React world!"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" );"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"}"})})]})})}),` `,(0,n.jsx)(e.p,{children:"The above react code can be written in plain javascript like below"}),` `,(0,n.jsx)(e.figure,{"data-rehype-pretty-code-figure":"",children:(0,n.jsx)(e.pre,{style:{backgroundColor:"#24292e",color:"#e1e4e8"},tabIndex:"0","data-language":"js","data-theme":"github-dark",children:(0,n.jsx)(e.code,{"data-language":"js","data-theme":"github-dark",children:(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"React."}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:"createElement"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"("}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"div"'}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:", "}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"null"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:", React."}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:"createElement"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"("}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"h1"'}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:", "}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"null"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:", "}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"Welcome to React world!'}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:'\\"'}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"'}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"));"})]})})})}),` `,(0,n.jsx)(e.hr,{}),` `,(0,n.jsxs)(e.h2,{id:"what-is-the-difference-between-element-and-component",children:["What is the difference between Element and Component?",(0,n.jsx)(e.a,{"aria-hidden":"true",tabIndex:"-1",href:"#what-is-the-difference-between-element-and-component",children:(0,n.jsx)(e.span,{className:"icon icon-link"})})]}),` `,(0,n.jsx)(e.p,{children:"An Element is a plain object describing what you want to appear on the screen in terms of the DOM nodes or other components. Elements can contain other Elements in their props. Creating a React element is cheap. Once an element is created, it is never mutated."}),` `,(0,n.jsx)(e.p,{children:"The object representation of React Element would be as follows:"}),` `,(0,n.jsx)(e.figure,{"data-rehype-pretty-code-figure":"",children:(0,n.jsx)(e.pre,{style:{backgroundColor:"#24292e",color:"#e1e4e8"},tabIndex:"0","data-language":"js","data-theme":"github-dark",children:(0,n.jsx)(e.code,{"data-language":"js","data-theme":"github-dark",children:(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"const"}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:" element"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" ="}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" React."}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:"createElement"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"("}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"div"'}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:", { id: "}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"login-btn"'}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" }, "}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"Login"'}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:");"})]})})})}),` `,(0,n.jsx)(e.p,{children:"The above React.createElement() function returns an object:"}),` `,(0,n.jsx)(e.figure,{"data-rehype-pretty-code-figure":"",children:(0,n.jsx)(e.pre,{style:{backgroundColor:"#24292e",color:"#e1e4e8"},tabIndex:"0","data-language":"js","data-theme":"github-dark",children:(0,n.jsxs)(e.code,{"data-language":"js","data-theme":"github-dark",children:[(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"{"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" type"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:": "}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:"'div'"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" props"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:": {"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" children"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:": "}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:"'Login'"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" id"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:": "}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:"'login-btn'"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" }"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"}"})})]})})}),` `,(0,n.jsx)(e.p,{children:"And finally it renders to the DOM using ReactDOM.render():"}),` `,(0,n.jsx)(e.figure,{"data-rehype-pretty-code-figure":"",children:(0,n.jsx)(e.pre,{style:{backgroundColor:"#24292e",color:"#e1e4e8"},tabIndex:"0","data-language":"js","data-theme":"github-dark",children:(0,n.jsx)(e.code,{"data-language":"js","data-theme":"github-dark",children:(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"<"}),(0,n.jsx)(e.span,{style:{color:"#85E89D"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" id"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"login-btn"'}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:">Login"})]})})})}),` `,(0,n.jsx)(e.p,{children:"Whereas a component can be declared in several different ways. It can be a class with a render() method or it can be defined as a function. In either case, it takes props as an input, and returns a JSX tree as the output:"}),` `,(0,n.jsx)(e.figure,{"data-rehype-pretty-code-figure":"",children:(0,n.jsx)(e.pre,{style:{backgroundColor:"#24292e",color:"#e1e4e8"},tabIndex:"0","data-language":"js","data-theme":"github-dark",children:(0,n.jsxs)(e.code,{"data-language":"js","data-theme":"github-dark",children:[(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"const"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" Button"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" ="}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ({ "}),(0,n.jsx)(e.span,{style:{color:"#FFAB70"},children:"onLogin"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" }) "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"=>"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#85E89D"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" id"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"{"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"login-btn"'}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"} "}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:"onClick"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"{onLogin}>"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" Login"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:");"})})]})})}),` `,(0,n.jsx)(e.p,{children:"Then JSX gets transpiled to a React.createElement() function tree:"}),` `,(0,n.jsx)(e.figure,{"data-rehype-pretty-code-figure":"",children:(0,n.jsx)(e.pre,{style:{backgroundColor:"#24292e",color:"#e1e4e8"},tabIndex:"0","data-language":"js","data-theme":"github-dark",children:(0,n.jsxs)(e.code,{"data-language":"js","data-theme":"github-dark",children:[(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"const"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" Button"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" ="}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ({ "}),(0,n.jsx)(e.span,{style:{color:"#FFAB70"},children:"onLogin"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" }) "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"=>"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" React."}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:"createElement"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"("})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:' "div"'}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" { id: "}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"login-btn"'}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:", onClick: onLogin },"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:' "Login"'})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" );"})})]})})}),` `,(0,n.jsx)(e.hr,{}),` `,(0,n.jsxs)(e.h2,{id:"how-to-create-components-in-react",children:["How to create components in React?",(0,n.jsx)(e.a,{"aria-hidden":"true",tabIndex:"-1",href:"#how-to-create-components-in-react",children:(0,n.jsx)(e.span,{className:"icon icon-link"})})]}),` `,(0,n.jsx)(e.p,{children:"There are two possible ways to create a component."}),` `,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:"Function Components"}),": This is the simplest way to create a component. Those are pure JavaScript functions that accept props object as the first parameter and return React elements:"]}),` `,(0,n.jsx)(e.figure,{"data-rehype-pretty-code-figure":"",children:(0,n.jsx)(e.pre,{style:{backgroundColor:"#24292e",color:"#e1e4e8"},tabIndex:"0","data-language":"js","data-theme":"github-dark",children:(0,n.jsxs)(e.code,{"data-language":"js","data-theme":"github-dark",children:[(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"function"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" Greeting"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"({ "}),(0,n.jsx)(e.span,{style:{color:"#FFAB70"},children:"message"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" }) {"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" return"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#85E89D"},children:"h1"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:">{"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:"`Hello, ${"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"message"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:"}`"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"};"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"}"})})]})})}),` `,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:"Class Components"}),": You can also use ES6 class to define a component. The above function component can be written as:"]}),` `,(0,n.jsx)(e.figure,{"data-rehype-pretty-code-figure":"",children:(0,n.jsx)(e.pre,{style:{backgroundColor:"#24292e",color:"#e1e4e8"},tabIndex:"0","data-language":"js","data-theme":"github-dark",children:(0,n.jsxs)(e.code,{"data-language":"js","data-theme":"github-dark",children:[(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"class"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" Greeting"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" extends"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" React"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"."}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:"Component"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" render"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"() {"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" return"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#85E89D"},children:"h1"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:">{"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:"`Hello, ${"}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"this"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:"."}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"props"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:"."}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"message"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:"}`"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"};"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" }"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"}"})})]})})}),` `,(0,n.jsxs)(e.p,{children:["After the introduction of ",(0,n.jsx)(e.strong,{children:"React Hooks"})," in react, class based components are hardly used."]}),` `,(0,n.jsx)(e.hr,{}),` `,(0,n.jsxs)(e.h2,{id:"what-are-pure-components-in-reactjs",children:["What are Pure Components in Reactjs?",(0,n.jsx)(e.a,{"aria-hidden":"true",tabIndex:"-1",href:"#what-are-pure-components-in-reactjs",children:(0,n.jsx)(e.span,{className:"icon icon-link"})})]}),` `,(0,n.jsx)(e.p,{children:"In functional programming, A function is considerd to be pure when"}),` `,(0,n.jsxs)(e.ul,{children:[` `,(0,n.jsx)(e.li,{children:"Its return value is only determined by its input values"}),` `,(0,n.jsx)(e.li,{children:"Its return value is always the same for the same input values"}),` `]}),` `,(0,n.jsx)(e.p,{children:`In react a component is said to be pure when it renders the same output for the same state and props. For class based component, React provides the PureComponent base class. Class components that extend the React.PureComponent class are treated as pure components.`}),` `,(0,n.jsxs)(e.p,{children:[`Pure components have some performance improvements and render optimizations since React implements the `,(0,n.jsx)(e.strong,{children:"shouldComponentUpdate()"})," method for them with a shallow comparison for props and state."]}),` `,(0,n.jsxs)(e.h2,{id:"are-react-functional-components-pure",children:["Are React functional components pure?",(0,n.jsx)(e.a,{"aria-hidden":"true",tabIndex:"-1",href:"#are-react-functional-components-pure",children:(0,n.jsx)(e.span,{className:"icon icon-link"})})]}),` `,(0,n.jsx)(e.p,{children:`Functional components cannot leverage the performance improvements and render optimizations that come with React.PureComponent since by definition, they are not classes, so they are not pure component.`}),` `,(0,n.jsx)(e.p,{children:`If you want React to treat a functional component as a pure component, you\u2019ll have to convert the functional component to a class component that extends React.PureComponent.`}),` `,(0,n.jsx)(e.p,{children:`With React.memo(), you can create memoized functional components that bail out of rendering on unnecessary updates using shallow comparison of props.`}),` `,(0,n.jsx)(e.p,{children:"Using the React.memo() API, the previous functional component can be wrapped as follows:"}),` `,(0,n.jsx)(e.figure,{"data-rehype-pretty-code-figure":"",children:(0,n.jsx)(e.pre,{style:{backgroundColor:"#24292e",color:"#e1e4e8"},tabIndex:"0","data-language":"js","data-theme":"github-dark",children:(0,n.jsxs)(e.code,{"data-language":"js","data-theme":"github-dark",children:[(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" { memo } "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:' "react"'}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"const"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" Todos"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" ="}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ({ "}),(0,n.jsx)(e.span,{style:{color:"#FFAB70"},children:"todos"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" }) "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"=>"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" console."}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:"log"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"("}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"child render"'}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:");"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" return"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <>"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#85E89D"},children:"h2"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:">My Todos"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" {todos."}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:"map"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"(("}),(0,n.jsx)(e.span,{style:{color:"#FFAB70"},children:"todo"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:", "}),(0,n.jsx)(e.span,{style:{color:"#FFAB70"},children:"index"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:") "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"=>"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" return"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#85E89D"},children:"p"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" key"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"{index}>{todo};"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" })}"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" );"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"};"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"export"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" default"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" memo"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"(Todos);"})]})]})})}),` `,(0,n.jsx)(e.p,{children:`For one, React.memo() is a higher-order component. It takes a React component as its first argument and returns a special type of React component that allows the renderer to render the component while memoizing the output. Therefore, if the component\u2019s props are shallowly equal, the React.memo() component will bail out the updates.`}),` `,(0,n.jsx)(e.p,{children:`React.memo() works with all React components. The first argument passed to React.memo() can be any type of React component. However, for class components, you should use React.PureComponent instead of using React.memo(). React.memo() also works with components rendered from the server using ReactDOMServer.`}),` `,(0,n.jsx)(e.hr,{}),` `,(0,n.jsxs)(e.h2,{id:"what-is-state-in-react",children:["What is state in React?",(0,n.jsx)(e.a,{"aria-hidden":"true",tabIndex:"-1",href:"#what-is-state-in-react",children:(0,n.jsx)(e.span,{className:"icon icon-link"})})]}),` `,(0,n.jsx)(e.p,{children:`State of a component is an object that holds some information that may change over the lifetime of the component. We should always try to make our state as simple as possible and minimize the number of stateful components.`}),` `,(0,n.jsx)(e.p,{children:"Let's create a user component with message state,"}),` `,(0,n.jsx)(e.figure,{"data-rehype-pretty-code-figure":"",children:(0,n.jsx)(e.pre,{style:{backgroundColor:"#24292e",color:"#e1e4e8"},tabIndex:"0","data-language":"js","data-theme":"github-dark",children:(0,n.jsxs)(e.code,{"data-language":"js","data-theme":"github-dark",children:[(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" React, { useState } "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:' "react"'}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"function"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" User"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"() {"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" const"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ["}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"message"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:", "}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"setMessage"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"] "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" useState"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"("}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"Welcome to React world"'}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:");"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" return"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#85E89D"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#85E89D"},children:"h1"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:">{message}"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" );"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"}"})})]})})}),` `,(0,n.jsx)(e.hr,{}),` `,(0,n.jsxs)(e.h2,{id:"what-are-props-in-react",children:["What are props in React?",(0,n.jsx)(e.a,{"aria-hidden":"true",tabIndex:"-1",href:"#what-are-props-in-react",children:(0,n.jsx)(e.span,{className:"icon icon-link"})})]}),` `,(0,n.jsx)(e.p,{children:"Props are inputs to components. They are single values or objects containing a set of values that are passed to components on creation using a naming convention similar to HTML-tag attributes. They are data passed down from a parent component to a child component."}),` `,(0,n.jsx)(e.p,{children:"The primary purpose of props in React is to provide following component functionality:"}),` `,(0,n.jsxs)(e.ul,{children:[` `,(0,n.jsx)(e.li,{children:"Pass custom data to your component."}),` `,(0,n.jsx)(e.li,{children:"Trigger state changes."}),` `,(0,n.jsx)(e.li,{children:"Use via this.props.reactProp inside component's render() method."}),` `]}),` `,(0,n.jsx)(e.p,{children:"For example, let us create an element with reactProp property:"}),` `,(0,n.jsx)(e.figure,{"data-rehype-pretty-code-figure":"",children:(0,n.jsx)(e.pre,{style:{backgroundColor:"#24292e",color:"#e1e4e8"},tabIndex:"0","data-language":"js","data-theme":"github-dark",children:(0,n.jsx)(e.code,{"data-language":"js","data-theme":"github-dark",children:(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"<"}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"Element"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" reactProp"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"{"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"1"'}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"} />"})]})})})}),` `,(0,n.jsx)(e.p,{children:"This reactProp (or whatever you came up with) name then becomes a property attached to React's native props object which originally already exists on all components created using React library."}),` `,(0,n.jsx)(e.figure,{"data-rehype-pretty-code-figure":"",children:(0,n.jsx)(e.pre,{style:{backgroundColor:"#24292e",color:"#e1e4e8"},tabIndex:"0","data-language":"js","data-theme":"github-dark",children:(0,n.jsx)(e.code,{"data-language":"js","data-theme":"github-dark",children:(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"props.reactProp"})})})})}),` `,(0,n.jsx)(e.p,{children:"Example: Props in Class Based Component"}),` `,(0,n.jsx)(e.figure,{"data-rehype-pretty-code-figure":"",children:(0,n.jsx)(e.pre,{style:{backgroundColor:"#24292e",color:"#e1e4e8"},tabIndex:"0","data-language":"js","data-theme":"github-dark",children:(0,n.jsxs)(e.code,{"data-language":"js","data-theme":"github-dark",children:[(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" React "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:' "react"'}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ReactDOM "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:' "react-dom"'}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,n.jsx)(e.span,{"data-line":""}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"class"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" ChildComponent"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" extends"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" React"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"."}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:"Component"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" render"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"() {"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" return"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#85E89D"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#85E89D"},children:"p"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:">{"}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"this"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:".props.name}"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#85E89D"},children:"p"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:">{"}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"this"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:".props.age}"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" );"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" }"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"}"})}),` `,(0,n.jsx)(e.span,{"data-line":""}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"class"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" ParentComponent"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" extends"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" React"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"."}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:"Component"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" render"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"() {"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" return"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#85E89D"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"ChildComponent"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" name"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"John"'}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" age"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"30"'}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" />"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"ChildComponent"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" name"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"Mary"'}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" age"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"25"'}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" />"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" );"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" }"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"}"})})]})})}),` `,(0,n.jsx)(e.p,{children:"Example: Props in Functional Component"}),` `,(0,n.jsx)(e.figure,{"data-rehype-pretty-code-figure":"",children:(0,n.jsx)(e.pre,{style:{backgroundColor:"#24292e",color:"#e1e4e8"},tabIndex:"0","data-language":"js","data-theme":"github-dark",children:(0,n.jsxs)(e.code,{"data-language":"js","data-theme":"github-dark",children:[(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" React "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:' "react"'}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ReactDOM "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:' "react-dom"'}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,n.jsx)(e.span,{"data-line":""}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"const"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" ChildComponent"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" ="}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ("}),(0,n.jsx)(e.span,{style:{color:"#FFAB70"},children:"props"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:") "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"=>"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" return"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#85E89D"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#85E89D"},children:"p"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:">{props.name}"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#85E89D"},children:"p"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:">{props.age}"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" );"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"};"})}),` `,(0,n.jsx)(e.span,{"data-line":""}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"const"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" ParentComponent"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" ="}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" () "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"=>"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" return"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#85E89D"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"ChildComponent"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" name"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"John"'}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" age"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"30"'}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" />"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"ChildComponent"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" name"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"Mary"'}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" age"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"25"'}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" />"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" );"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"};"})})]})})}),` `,(0,n.jsx)(e.hr,{}),` `,(0,n.jsxs)(e.h2,{id:"what-is-the-difference-between-state-and-props",children:["What is the difference between state and props?",(0,n.jsx)(e.a,{"aria-hidden":"true",tabIndex:"-1",href:"#what-is-the-difference-between-state-and-props",children:(0,n.jsx)(e.span,{className:"icon icon-link"})})]}),` `,(0,n.jsx)(e.p,{children:`Both props and state are plain JavaScript objects. While both of them hold information that influences the output of render, they are different in their functionality with respect to component.`}),` `,(0,n.jsx)(e.p,{children:"Example of State:"}),` `,(0,n.jsx)(e.figure,{"data-rehype-pretty-code-figure":"",children:(0,n.jsx)(e.pre,{style:{backgroundColor:"#24292e",color:"#e1e4e8"},tabIndex:"0","data-language":"js","data-theme":"github-dark",children:(0,n.jsxs)(e.code,{"data-language":"js","data-theme":"github-dark",children:[(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" React "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:" 'react'"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"function"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" Counter"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"() {"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" const"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ["}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"count"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:", "}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"setCount"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"] "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" React."}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:"useState"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"("}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"1"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"); "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"<--"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" React State"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" return"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#85E89D"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#85E89D"},children:"p"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:">You clicked {count} times"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#85E89D"},children:"button"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" onClick"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"{() "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"=>"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" setCount"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"(count "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"+"}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:" 1"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:")}>"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" Click me"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" );"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"} "})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"export"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" default"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" Counter;"})]})]})})}),` `,(0,n.jsx)(e.p,{children:"Props get passed to the component similar to function parameters whereas state is managed within the component similar to variables declared within a function."}),` `,(0,n.jsx)(e.p,{children:"Example of props:"}),` `,(0,n.jsx)(e.figure,{"data-rehype-pretty-code-figure":"",children:(0,n.jsx)(e.pre,{style:{backgroundColor:"#24292e",color:"#e1e4e8"},tabIndex:"0","data-language":"js","data-theme":"github-dark",children:(0,n.jsxs)(e.code,{"data-language":"js","data-theme":"github-dark",children:[(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"function"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" Avatar"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"({ "}),(0,n.jsx)(e.span,{style:{color:"#FFAB70"},children:"person"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:", "}),(0,n.jsx)(e.span,{style:{color:"#FFAB70"},children:"size"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" }) {"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" return"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#85E89D"},children:"img"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" className"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"avatar"'})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" src"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"https://i.imgur.com/1bX5QH6.jpg"'})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" alt"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"Lin Lanying"'})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" width"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"{"}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"100"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"}"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" height"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"{"}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"100"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"}"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" />"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" );"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"}"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"export"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" default"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" function"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" Profile"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"() {"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" return"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"Avatar"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" person"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"{{ name: "}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:"'Lin Lanying'"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:", imageId: "}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:"'1bX5QH6'"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" }}"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" size"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"{"}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"100"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"}"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" />"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" );"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"}"})})]})})}),` `,(0,n.jsx)(e.hr,{}),` `,(0,n.jsxs)(e.h2,{id:"what-is-the-use-of-key-prop-in-reactjs",children:["What is the use of key prop in reactjs?",(0,n.jsx)(e.a,{"aria-hidden":"true",tabIndex:"-1",href:"#what-is-the-use-of-key-prop-in-reactjs",children:(0,n.jsx)(e.span,{className:"icon icon-link"})})]}),` `,(0,n.jsx)(e.p,{children:"A key is a special string attribute you should include when creating arrays of elements. Key prop helps React identify which items have changed, are added, or are removed."}),` `,(0,n.jsx)(e.p,{children:"Keys should be unique among its siblings. Most often we use ID from our data as key:"}),` `,(0,n.jsx)(e.figure,{"data-rehype-pretty-code-figure":"",children:(0,n.jsx)(e.pre,{style:{backgroundColor:"#24292e",color:"#e1e4e8"},tabIndex:"0","data-language":"js","data-theme":"github-dark",children:(0,n.jsx)(e.code,{"data-language":"js","data-theme":"github-dark",children:(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"const"}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:" todoItems"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" ="}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" todos."}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:"map"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"(("}),(0,n.jsx)(e.span,{style:{color:"#FFAB70"},children:"todo"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:") "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"=>"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#85E89D"},children:"li"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" key"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"{todo.id}>{todo.text});"})]})})})}),` `,(0,n.jsx)(e.p,{children:"When you don't have stable IDs for rendered items, you may use the item index as a key as a last resort:"}),` `,(0,n.jsx)(e.figure,{"data-rehype-pretty-code-figure":"",children:(0,n.jsx)(e.pre,{style:{backgroundColor:"#24292e",color:"#e1e4e8"},tabIndex:"0","data-language":"js","data-theme":"github-dark",children:(0,n.jsxs)(e.code,{"data-language":"js","data-theme":"github-dark",children:[(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"const"}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:" todoItems"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" ="}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" todos."}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:"map"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"(("}),(0,n.jsx)(e.span,{style:{color:"#FFAB70"},children:"todo"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:", "}),(0,n.jsx)(e.span,{style:{color:"#FFAB70"},children:"index"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:") "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"=>"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#85E89D"},children:"li"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" key"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"{index}>{todo.text}"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"));"})})]})})}),` `,(0,n.jsx)(e.p,{children:"Note:"}),` `,(0,n.jsxs)(e.ul,{children:[` `,(0,n.jsx)(e.li,{children:"Using indexes for keys is not recommended if the order of items may change. This can negatively impact performance and may cause issues with component state."}),` `,(0,n.jsx)(e.li,{children:"If you extract list item as separate component then apply keys on list component instead of li tag."}),` `,(0,n.jsx)(e.li,{children:"There will be a warning message in the console if the key prop is not present on list items."}),` `]}),` `,(0,n.jsx)(e.hr,{}),` `,(0,n.jsxs)(e.h2,{id:"what-is-react-hooks",children:["What is React Hooks?",(0,n.jsx)(e.a,{"aria-hidden":"true",tabIndex:"-1",href:"#what-is-react-hooks",children:(0,n.jsx)(e.span,{className:"icon icon-link"})})]}),` `,(0,n.jsx)(e.p,{children:"React Hooks are the built-in functions that permit developers for using the state and lifecycle methods within React components"}),` `,(0,n.jsx)(e.p,{children:"Each lifecycle of a component is having 3 phases which include mount, unmount, and update. Along with that, components have properties and states. Hooks will allow using these methods by developers for improving the reuse of code with higher flexibility navigating the component tree."}),` `,(0,n.jsx)(e.p,{children:"Using Hook, all features of React can be used without writing class components. For example, before React version 16.8, it required a class component for managing the state of a component. But now using the useState hook, we can keep the state in a functional component."}),` `,(0,n.jsxs)(e.ul,{children:[` `,(0,n.jsx)(e.li,{children:"useState: It declares a state variable that you can update directly."}),` `,(0,n.jsx)(e.li,{children:"useReducer: It declares a state variable with the update logic inside a reducer function."}),` `,(0,n.jsx)(e.li,{children:"useContext: It reads and subscribes to a context."}),` `,(0,n.jsx)(e.li,{children:"useRef declares a ref. You can hold any value in it, but most often it\u2019s used to hold a DOM node."}),` `,(0,n.jsx)(e.li,{children:"useImperativeHandle lets you customize the ref exposed by your component. This is rarely used."}),` `,(0,n.jsx)(e.li,{children:"useEffect connects a component to an external system."}),` `,(0,n.jsx)(e.li,{children:"useMemo lets you cache the result of an expensive calculation."}),` `,(0,n.jsx)(e.li,{children:"useCallback lets you cache a function definition before passing it down to an optimized component."}),` `]}),` `,(0,n.jsx)(e.hr,{}),` `,(0,n.jsxs)(e.h2,{id:"what-is-the-use-of-react-state-hooks",children:["What is the use of React state Hooks?",(0,n.jsx)(e.a,{"aria-hidden":"true",tabIndex:"-1",href:"#what-is-the-use-of-react-state-hooks",children:(0,n.jsx)(e.span,{className:"icon icon-link"})})]}),` `,(0,n.jsx)(e.p,{children:`React State lets a component remember information so that you can use it latter. In below example, we are defining a react state using useState and holding a initial value 0.`}),` `,(0,n.jsx)(e.p,{children:`useState returns an array containing two value. The first one is current state and second one is a function which lets you change the state.`}),` `,(0,n.jsx)(e.p,{children:"The set function set the new state and whenever a state is updated , component gets re-renderd."}),` `,(0,n.jsx)(e.figure,{"data-rehype-pretty-code-figure":"",children:(0,n.jsx)(e.pre,{style:{backgroundColor:"#24292e",color:"#e1e4e8"},tabIndex:"0","data-language":"js","data-theme":"github-dark",children:(0,n.jsxs)(e.code,{"data-language":"js","data-theme":"github-dark",children:[(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" {useState} "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:' "react"'})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"export"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" default"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" function"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" Counter"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"() {"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" const"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ["}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"count"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:", "}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"setCount"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"] "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" useState"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"("}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"0"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"); "}),(0,n.jsx)(e.span,{style:{color:"#6A737D"},children:"// <--- react state"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" return"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#85E89D"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#85E89D"},children:"h1"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:">Hello react"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#85E89D"},children:"h1"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:">{count}"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#85E89D"},children:"button"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" onClick"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"{()"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"=>"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:"setCount"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"("}),(0,n.jsx)(e.span,{style:{color:"#FFAB70"},children:"prev"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"=>"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"prev"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"+"}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"1"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:")}>Increase Count"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" )"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"}"})})]})})}),` `,(0,n.jsx)(e.p,{children:"set function can directly set a new state to new value"}),` `,(0,n.jsx)(e.figure,{"data-rehype-pretty-code-figure":"",children:(0,n.jsx)(e.pre,{style:{backgroundColor:"#24292e",color:"#e1e4e8"},tabIndex:"0","data-language":"js","data-theme":"github-dark",children:(0,n.jsx)(e.code,{"data-language":"js","data-theme":"github-dark",children:(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:"setCount"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"(count"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"+"}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"1"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:")"})]})})})}),` `,(0,n.jsx)(e.hr,{}),` `,(0,n.jsxs)(e.h2,{id:"what-is-the-use-of-useeffect-hooks-in-reactjs",children:["What is the use of useEffect Hooks in reactjs?",(0,n.jsx)(e.a,{"aria-hidden":"true",tabIndex:"-1",href:"#what-is-the-use-of-useeffect-hooks-in-reactjs",children:(0,n.jsx)(e.span,{className:"icon icon-link"})})]}),` `,(0,n.jsx)(e.p,{children:"useEffect lets you invokes side effects from within functional components."}),` `,(0,n.jsxs)(e.h3,{id:"what-is-side-effects",children:["what is side effects?",(0,n.jsx)(e.a,{"aria-hidden":"true",tabIndex:"-1",href:"#what-is-side-effects",children:(0,n.jsx)(e.span,{className:"icon icon-link"})})]}),` `,(0,n.jsxs)(e.p,{children:["A ",(0,n.jsx)(e.strong,{children:"side effect"}),` is anything that affects something outside the scope of the function being executed. These can be a network request, which has your code communicating with a third party api, timer function like setTimeout.`]}),` `,(0,n.jsx)(e.p,{children:`useEffect is the hooks that lets you decouple the logic of rendering from side effects. Below code show data fetching side effects from an api. useEffect() starts a fetch request by calling fetchPosts() async function after the initial rendering. When the request completes, setPosts(posts) updates the posts state with the just fetched posts list.`}),` `,(0,n.jsx)(e.figure,{"data-rehype-pretty-code-figure":"",children:(0,n.jsx)(e.pre,{style:{backgroundColor:"#24292e",color:"#e1e4e8"},tabIndex:"0","data-language":"js","data-theme":"github-dark",children:(0,n.jsxs)(e.code,{"data-language":"js","data-theme":"github-dark",children:[(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" { useEffect, useState } "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:" 'react'"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"function"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" FetchPost"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"() {"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" const"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ["}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"posts"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:", "}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"setPosts"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"] "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" useState"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"([]);"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" useEffect"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"(() "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"=>"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" async"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" function"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" fetchPosts"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"() {"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" const"}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:" response"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" ="}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" await"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" fetch"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"("}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:"'/posts'"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:");"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" const"}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:" posts"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" ="}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" await"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" response."}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:"json"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"();"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" setPosts"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"(posts);"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" }"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" fetchPosts"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"();"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" }, []);"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" return"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#85E89D"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" {posts."}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:"map"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"("}),(0,n.jsx)(e.span,{style:{color:"#FFAB70"},children:"post"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" =>"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#85E89D"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:">{post})}"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" );"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"}"})})]})})}),` `,(0,n.jsx)(e.p,{children:"useEffect needs two arguments"}),` `,(0,n.jsxs)(e.ul,{children:[` `,(0,n.jsx)(e.li,{children:"A setup function which perform the side efects logic. It should return a cleanup function."}),` `,(0,n.jsx)(e.li,{children:`A list of dependencies including every value from your component used inside of those functions. React calls your setup and cleanup functions whenever it\u2019s necessary, which may happen multiple times:`}),` `]}),` `,(0,n.jsx)(e.p,{children:"Setup code runs when component is added to the page (mounts). After every re-render of component where the dependencies have changed:"}),` `,(0,n.jsxs)(e.ul,{children:[` `,(0,n.jsx)(e.li,{children:"First, cleanup code runs with the old props and state."}),` `,(0,n.jsx)(e.li,{children:"Then, setup code runs with the new props and state."}),` `,(0,n.jsx)(e.li,{children:"cleanup code runs one final time after your component is removed from the page (unmounts)."}),` `]}),` `,(0,n.jsx)(e.figure,{"data-rehype-pretty-code-figure":"",children:(0,n.jsx)(e.pre,{style:{backgroundColor:"#24292e",color:"#e1e4e8"},tabIndex:"0","data-language":"js","data-theme":"github-dark",children:(0,n.jsx)(e.code,{"data-language":"js","data-theme":"github-dark",children:(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:"useEffect"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"(setup, dependencies"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"?"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:")"})]})})})}),` `,(0,n.jsx)(e.hr,{}),` `,(0,n.jsxs)(e.h2,{id:"what-is-the-use-of-usecontext-hooks-in-reactjs",children:["What is the use of useContext Hooks in reactjs?",(0,n.jsx)(e.a,{"aria-hidden":"true",tabIndex:"-1",href:"#what-is-the-use-of-usecontext-hooks-in-reactjs",children:(0,n.jsx)(e.span,{className:"icon icon-link"})})]}),` `,(0,n.jsx)(e.p,{children:"Context provides a way to pass data through the component tree without having to pass props through props drilling at every level."}),` `,(0,n.jsx)(e.p,{children:"useContext reads and subscribes to a context."}),` `,(0,n.jsx)(e.figure,{"data-rehype-pretty-code-figure":"",children:(0,n.jsx)(e.pre,{style:{backgroundColor:"#24292e",color:"#e1e4e8"},tabIndex:"0","data-language":"js","data-theme":"github-dark",children:(0,n.jsxs)(e.code,{"data-language":"js","data-theme":"github-dark",children:[(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" {createContext} "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:' "react"'})]}),` `,(0,n.jsx)(e.span,{"data-line":""}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" React "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:" 'react'"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#6A737D"},children:"// Creating the context object and passing the default values."})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"const"}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:" authContext"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" ="}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" createContext"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"({status:"}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"null"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:","}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:"login"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:":()"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"=>"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"{}});"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"export"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" default"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" authContext;"})]})]})})}),` `,(0,n.jsx)(e.figure,{"data-rehype-pretty-code-figure":"",children:(0,n.jsx)(e.pre,{style:{backgroundColor:"#24292e",color:"#e1e4e8"},tabIndex:"0","data-language":"js","data-theme":"github-dark",children:(0,n.jsxs)(e.code,{"data-language":"js","data-theme":"github-dark",children:[(0,n.jsx)(e.span,{"data-line":""}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" React, { useState } "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:' "react"'}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" Auth "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:' "./Auth"'}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" AuthContext "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:' "./auth-context"'}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"const"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" App"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" ="}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" () "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"=>"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#6A737D"},children:" //using the state to dynamicallly pass the values to the context"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" const"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ["}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"authstatus"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:", "}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"setauthstatus"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"] "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" useState"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"("}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"false"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:");"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" const"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" login"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" ="}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" () "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"=>"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" setauthstatus"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"("}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"true"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:");"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" };"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" return"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"React.Fragment"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"AuthContext.Provider"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" value"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"{{ status: authstatus, login: login }}>"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"Auth"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" />"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" );"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"};"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"export"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" default"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" App;"})]})]})})}),` `,(0,n.jsx)(e.figure,{"data-rehype-pretty-code-figure":"",children:(0,n.jsx)(e.pre,{style:{backgroundColor:"#24292e",color:"#e1e4e8"},tabIndex:"0","data-language":"js","data-theme":"github-dark",children:(0,n.jsxs)(e.code,{"data-language":"js","data-theme":"github-dark",children:[(0,n.jsx)(e.span,{"data-line":""}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" React, { useContext } "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:' "react"'}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" AuthContext "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:' "./auth-context"'}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"const"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" Auth"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" ="}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" () "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"=>"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#6A737D"},children:" // Now all the data stored in the context can"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#6A737D"},children:" // be accessed with the auth variable"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" const"}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:" auth"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" ="}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" useContext"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"(AuthContext);"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" console."}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:"log"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"(auth.status);"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" return"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#85E89D"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#85E89D"},children:"h1"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:">Are you authenticated?"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" {auth.status "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"?"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"<"}),(0,n.jsx)(e.span,{style:{color:"#85E89D"},children:"p"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:">Yes you are"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:":"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"<"}),(0,n.jsx)(e.span,{style:{color:"#85E89D"},children:"p"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:">Nopes}"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#85E89D"},children:"button"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" onClick"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"{auth.login}>Click To Login"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" );"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"};"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"export"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" default"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" Auth;"})]})]})})}),` `,(0,n.jsx)(e.hr,{}),` `,(0,n.jsxs)(e.h2,{id:"what-is-the-use-of-useref-hooks-in-reactjs",children:["What is the use of useRef Hooks in reactjs?",(0,n.jsx)(e.a,{"aria-hidden":"true",tabIndex:"-1",href:"#what-is-the-use-of-useref-hooks-in-reactjs",children:(0,n.jsx)(e.span,{className:"icon icon-link"})})]}),` `,(0,n.jsx)(e.p,{children:"Refs let a component hold some information that isn\u2019t used for rendering, like a DOM node or a timeout ID. Unlike with state, updating a ref does not re-render your component. Refs are an \u201Cescape hatch\u201D from the React paradigm. They are useful when you need to work with non-React systems, such as the built-in browser APIs."}),` `,(0,n.jsx)(e.p,{children:`useRef declares a ref. You can hold any value in it, but most often it\u2019s used to hold a DOM node. useImperativeHandle lets you customize the ref exposed by your component. This is rarely used.`}),` `,(0,n.jsx)(e.figure,{"data-rehype-pretty-code-figure":"",children:(0,n.jsx)(e.pre,{style:{backgroundColor:"#24292e",color:"#e1e4e8"},tabIndex:"0","data-language":"js","data-theme":"github-dark",children:(0,n.jsx)(e.code,{"data-language":"js","data-theme":"github-dark",children:(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"const"}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:" ref"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" ="}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" useRef"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"(initialValue)"})]})})})}),` `,(0,n.jsx)(e.p,{children:`Parameters initialValue: The value you want the ref object\u2019s current property to be initially. It can be a value of any type. This argument is ignored after the initial render. Returns useRef returns an object with a single property:`}),` `,(0,n.jsx)(e.p,{children:`current: Initially, it\u2019s set to the initialValue you have passed. You can later set it to something else. If you pass the ref object to React as a ref attribute to a JSX node, React will set its current property. On the next renders, useRef will return the same object.`}),` `,(0,n.jsx)(e.figure,{"data-rehype-pretty-code-figure":"",children:(0,n.jsx)(e.pre,{style:{backgroundColor:"#24292e",color:"#e1e4e8"},tabIndex:"0","data-language":"js","data-theme":"github-dark",children:(0,n.jsxs)(e.code,{"data-language":"js","data-theme":"github-dark",children:[(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" { useRef } "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:" 'react'"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,n.jsx)(e.span,{"data-line":""}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"export"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" default"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" function"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" Counter"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"() {"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" let"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ref "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" useRef"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"("}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"0"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:");"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" function"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" handleClick"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"() {"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ref.current "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ref.current "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"+"}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:" 1"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" alert"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"("}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:"'You clicked '"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" +"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ref.current "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"+"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:" ' times!'"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:");"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" }"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" return"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#85E89D"},children:"button"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" onClick"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"{handleClick}>"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" Click me!"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" );"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"}"})})]})})}),` `,(0,n.jsxs)(e.h2,{id:"what-is-the-use-of-usememo-hooks-in-reactjs",children:["What is the use of useMemo Hooks in reactjs?",(0,n.jsx)(e.a,{"aria-hidden":"true",tabIndex:"-1",href:"#what-is-the-use-of-usememo-hooks-in-reactjs",children:(0,n.jsx)(e.span,{className:"icon icon-link"})})]}),` `,(0,n.jsx)(e.p,{children:"useMemo is a React Hook that lets you cache the result of a calculation between re-renders."}),` `,(0,n.jsx)(e.figure,{"data-rehype-pretty-code-figure":"",children:(0,n.jsx)(e.pre,{style:{backgroundColor:"#24292e",color:"#e1e4e8"},tabIndex:"0","data-language":"js","data-theme":"github-dark",children:(0,n.jsx)(e.code,{"data-language":"js","data-theme":"github-dark",children:(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"const"}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:" cachedValue"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" ="}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" useMemo"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"(calculateValue, dependencies)"})]})})})}),` `,(0,n.jsx)(e.p,{children:"useMemo takes two parameters, the first one is the function calculating the value that you want to cache and second one is dependencies."}),` `,(0,n.jsxs)(e.ul,{children:[` `,(0,n.jsxs)(e.li,{children:[` `,(0,n.jsx)(e.p,{children:"calculateValue: The function calculating the value that you want to cache. It should be pure, should take no arguments, and should return a value of any type. React will call your function during the initial render. On subsequent renders, React will return the same value again if the dependencies have not changed since the last render. Otherwise, it will call calculateValue, return its result, and store it in case it can be reused later."}),` `]}),` `,(0,n.jsxs)(e.li,{children:[` `,(0,n.jsx)(e.p,{children:"dependencies: The list of all reactive values referenced inside of the calculateValue code. Reactive values include props, state, and all the variables and functions declared directly inside your component body. If your linter is configured for React, it will verify that every reactive value is correctly specified as a dependency. The list of dependencies must have a constant number of items and be written inline like [dep1, dep2, dep3]. React will compare each dependency with its previous value using the Object.is comparison algorithm."}),` `]}),` `]}),` `,(0,n.jsx)(e.p,{children:"On the initial render, useMemo returns the result of calling calculateValue with no arguments.During subsequent renders, it will either return an already stored value from the last render (if the dependencies haven\u2019t changed), or call calculateValue again, and return the result that calculateValue has returned."}),` `,(0,n.jsxs)(e.h3,{id:"caveats",children:["Caveats",(0,n.jsx)(e.a,{"aria-hidden":"true",tabIndex:"-1",href:"#caveats",children:(0,n.jsx)(e.span,{className:"icon icon-link"})})]}),` `,(0,n.jsxs)(e.ul,{children:[` `,(0,n.jsx)(e.li,{children:"useMemo is a Hook, so you can only call it at the top level of your component or your own Hooks. You can\u2019t call it inside loops or conditions. If you need that, extract a new component and move the state into it."}),` `,(0,n.jsx)(e.li,{children:"In Strict Mode, React will call your calculation function twice in order to help you find accidental impurities. This is development-only behavior and does not affect production. If your calculation function is pure (as it should be), this should not affect the logic of your component. The result from one of the calls will be ignored."}),` `,(0,n.jsx)(e.li,{children:"React will not throw away the cached value unless there is a specific reason to do that. For example, in development, React throws away the cache when you edit the file of your component. Both in development and in production, React will throw away the cache if your component suspends during the initial mount. In the future, React may add more features that take advantage of throwing away the cache\u2014for example, if React adds built-in support for virtualized lists in the future, it would make sense to throw away the cache for items that scroll out of the virtualized table viewport. This should match your expectations if you rely on useMemo solely as a performance optimization. Otherwise, a state variable or a ref may be more appropriate."}),` `]}),` `,(0,n.jsxs)(e.h3,{id:"usage",children:["Usage",(0,n.jsx)(e.a,{"aria-hidden":"true",tabIndex:"-1",href:"#usage",children:(0,n.jsx)(e.span,{className:"icon icon-link"})})]}),` `,(0,n.jsx)(e.p,{children:"By default, React will re-run the entire body of your component every time that it re-renders. For example, if this TodoList updates its state or receives new props from its parent, the filterTodos function will re-run:"}),` `,(0,n.jsx)(e.figure,{"data-rehype-pretty-code-figure":"",children:(0,n.jsx)(e.pre,{style:{backgroundColor:"#24292e",color:"#e1e4e8"},tabIndex:"0","data-language":"js","data-theme":"github-dark",children:(0,n.jsxs)(e.code,{"data-language":"js","data-theme":"github-dark",children:[(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" { useMemo } "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:" 'react'"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,n.jsx)(e.span,{"data-line":""}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"function"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" TodoList"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"({ "}),(0,n.jsx)(e.span,{style:{color:"#FFAB70"},children:"todos"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:", "}),(0,n.jsx)(e.span,{style:{color:"#FFAB70"},children:"tab"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" }) {"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" const"}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:" visibleTodos"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" ="}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" useMemo"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"("})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" () "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"=>"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" filterTodos"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"(todos, tab),"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" [todos, tab]"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" );"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#6A737D"},children:" // ..."})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"}"})})]})})}),` `,(0,n.jsx)(e.hr,{}),` `,(0,n.jsxs)(e.h2,{id:"what-is-the-use-of-usecallback-hooks-in-reactjs",children:["What is the use of useCallback Hooks in reactjs?",(0,n.jsx)(e.a,{"aria-hidden":"true",tabIndex:"-1",href:"#what-is-the-use-of-usecallback-hooks-in-reactjs",children:(0,n.jsx)(e.span,{className:"icon icon-link"})})]}),` `,(0,n.jsx)(e.p,{children:"useCallback is a React Hook that lets you cache a function definition between re-renders."}),` `,(0,n.jsx)(e.figure,{"data-rehype-pretty-code-figure":"",children:(0,n.jsx)(e.pre,{style:{backgroundColor:"#24292e",color:"#e1e4e8"},tabIndex:"0","data-language":"js","data-theme":"github-dark",children:(0,n.jsx)(e.code,{"data-language":"js","data-theme":"github-dark",children:(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"const"}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:" cachedFn"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" ="}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" useCallback"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"(fn, dependencies)"})]})})})}),` `,(0,n.jsx)(e.p,{children:"usecallback takes two parameters, the first one is function which you wants to cache and second one is dependencies."}),` `,(0,n.jsxs)(e.ul,{children:[` `,(0,n.jsxs)(e.li,{children:[` `,(0,n.jsx)(e.p,{children:"fn: The function value that you want to cache. It can take any arguments and return any values. React will return (not call!) your function back to you during the initial render. On subsequent renders, React will give you the same function again if the dependencies have not changed since the last render. Otherwise, it will give you the function that you have passed during the current render, and store it in case it can be reused later. React will not call your function. The function is returned to you so you can decide when and whether to call it."}),` `]}),` `,(0,n.jsxs)(e.li,{children:[` `,(0,n.jsx)(e.p,{children:"dependencies: The list of all reactive values referenced inside of the fn code. Reactive values include props, state, and all the variables and functions declared directly inside your component body. If your linter is configured for React, it will verify that every reactive value is correctly specified as a dependency. The list of dependencies must have a constant number of items and be written inline like [dep1, dep2, dep3]. React will compare each dependency with its previous value using the Object.is comparison algorithm."}),` `]}),` `]}),` `,(0,n.jsx)(e.p,{children:"useCallback returns the fn function you have passed.During subsequent renders, it will either return an already stored function from the last render (if the dependencies haven\u2019t changed), or return the fn function you have passed during this render."}),` `,(0,n.jsxs)(e.h3,{id:"caveats-1",children:["Caveats",(0,n.jsx)(e.a,{"aria-hidden":"true",tabIndex:"-1",href:"#caveats-1",children:(0,n.jsx)(e.span,{className:"icon icon-link"})})]}),` `,(0,n.jsxs)(e.ul,{children:[` `,(0,n.jsxs)(e.li,{children:[` `,(0,n.jsx)(e.p,{children:"useCallback is a Hook, so you can only call it at the top level of your component or your own Hooks. You can\u2019t call it inside loops or conditions. If you need that, extract a new component and move the state into it."}),` `]}),` `,(0,n.jsxs)(e.li,{children:[` `,(0,n.jsx)(e.p,{children:"React will not throw away the cached function unless there is a specific reason to do that. For example, in development, React throws away the cache when you edit the file of your component."}),` `]}),` `,(0,n.jsxs)(e.li,{children:[` `,(0,n.jsx)(e.p,{children:"Both in development and in production, React will throw away the cache if your component suspends during the initial mount. In the future, React may add more features that take advantage of throwing away the cache\u2014for example, if React adds built-in support for virtualized lists in the future, it would make sense to throw away the cache for items that scroll out of the virtualized table viewport. This should match your expectations if you rely on useCallback as a performance optimization. Otherwise, a state variable or a ref may be more appropriate."}),` `]}),` `]}),` `,(0,n.jsxs)(e.h3,{id:"usage-1",children:["Usage",(0,n.jsx)(e.a,{"aria-hidden":"true",tabIndex:"-1",href:"#usage-1",children:(0,n.jsx)(e.span,{className:"icon icon-link"})})]}),` `,(0,n.jsx)(e.p,{children:"Say you\u2019re passing a handleSubmit function down from the ProductPage to the ShippingForm component:"}),` `,(0,n.jsx)(e.p,{children:"In this example, the ShippingForm component is artificially slowed down so that you can see what happens when a React component you\u2019re rendering is genuinely slow. Try incrementing the counter and toggling the theme."}),` `,(0,n.jsx)(e.p,{children:"Incrementing the counter feels slow because it forces the slowed down ShippingForm to re-render. That\u2019s expected because the counter has changed, and so you need to reflect the user\u2019s new choice on the screen."}),` `,(0,n.jsx)(e.p,{children:"Next, try toggling the theme. Thanks to useCallback together with memo, it\u2019s fast despite the artificial slowdown! ShippingForm skipped re-rendering because the handleSubmit function has not changed. The handleSubmit function has not changed because both productId and referral (your useCallback dependencies) haven\u2019t changed since last render."}),` `,(0,n.jsx)(e.figure,{"data-rehype-pretty-code-figure":"",children:(0,n.jsx)(e.pre,{style:{backgroundColor:"#24292e",color:"#e1e4e8"},tabIndex:"0","data-language":"js","data-theme":"github-dark",children:(0,n.jsxs)(e.code,{"data-language":"js","data-theme":"github-dark",children:[(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#6A737D"},children:"//App.js"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" { useState } "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:" 'react'"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ProductPage "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:" './ProductPage.js'"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"export"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" default"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" function"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" App"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"() {"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" const"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ["}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"isDark"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:", "}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"setIsDark"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"] "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" useState"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"("}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"false"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:");"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" return"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <>"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#85E89D"},children:"label"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#85E89D"},children:"input"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" type"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"checkbox"'})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" checked"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"{isDark}"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" onChange"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"{"}),(0,n.jsx)(e.span,{style:{color:"#FFAB70"},children:"e"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" =>"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" setIsDark"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"(e.target.checked)}"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" />"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" Dark mode"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#85E89D"},children:"hr"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" />"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"ProductPage"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" referrerId"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"wizard_of_oz"'})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" productId"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"{"}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"123"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"}"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" theme"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"{isDark "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"?"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:" 'dark'"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" :"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:" 'light'"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"}"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" />"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" );"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"}"})})]})})}),` `,(0,n.jsx)(e.figure,{"data-rehype-pretty-code-figure":"",children:(0,n.jsx)(e.pre,{style:{backgroundColor:"#24292e",color:"#e1e4e8"},tabIndex:"0","data-language":"js","data-theme":"github-dark",children:(0,n.jsxs)(e.code,{"data-language":"js","data-theme":"github-dark",children:[(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#6A737D"},children:"//ProductPage.js"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" { useCallback } "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:" 'react'"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ShippingForm "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:" './ShippingForm.js'"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"export"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" default"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" function"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" ProductPage"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"({ "}),(0,n.jsx)(e.span,{style:{color:"#FFAB70"},children:"productId"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:", "}),(0,n.jsx)(e.span,{style:{color:"#FFAB70"},children:"referrer"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:", "}),(0,n.jsx)(e.span,{style:{color:"#FFAB70"},children:"theme"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" }) {"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" const"}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:" handleSubmit"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" ="}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" useCallback"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"(("}),(0,n.jsx)(e.span,{style:{color:"#FFAB70"},children:"orderDetails"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:") "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"=>"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" post"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"("}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:"'/product/'"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" +"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" productId "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"+"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:" '/buy'"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:", {"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" referrer,"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" orderDetails,"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" });"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" }, [productId, referrer]);"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" return"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#85E89D"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" className"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"{theme}>"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"ShippingForm"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" onSubmit"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"{handleSubmit} />"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" );"})})]})})}),` `,(0,n.jsx)(e.figure,{"data-rehype-pretty-code-figure":"",children:(0,n.jsx)(e.pre,{style:{backgroundColor:"#24292e",color:"#e1e4e8"},tabIndex:"0","data-language":"js","data-theme":"github-dark",children:(0,n.jsxs)(e.code,{"data-language":"js","data-theme":"github-dark",children:[(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" { memo, useState } "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:" 'react'"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"const"}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:" ShippingForm"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" ="}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" memo"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"("}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"function"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" ShippingForm"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"({ "}),(0,n.jsx)(e.span,{style:{color:"#FFAB70"},children:"onSubmit"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" }) {"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" const"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ["}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"count"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:", "}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"setCount"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"] "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" useState"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"("}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"1"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:");"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" console."}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:"log"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"("}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:"'[ARTIFICIALLY SLOW] Rendering '"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:");"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" let"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" startTime "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" performance."}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:"now"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"();"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" while"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" (performance."}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:"now"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"() "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"-"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" startTime "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"<"}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:" 500"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:") {"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#6A737D"},children:" // Do nothing for 500 ms to emulate extremely slow code"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" }"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" function"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" handleSubmit"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"("}),(0,n.jsx)(e.span,{style:{color:"#FFAB70"},children:"e"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:") {"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" e."}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:"preventDefault"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"();"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" const"}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:" formData"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" ="}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" new"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" FormData"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"(e.target);"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" const"}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:" orderDetails"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" ="}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" ..."}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"Object."}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:"fromEntries"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"(formData),"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" count"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" };"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" onSubmit"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"(orderDetails);"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" }"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" return"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#85E89D"},children:"form"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" onSubmit"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"{handleSubmit}>"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#85E89D"},children:"p"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"><"}),(0,n.jsx)(e.span,{style:{color:"#85E89D"},children:"b"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:">Note: <"}),(0,n.jsx)(e.span,{style:{color:"#85E89D"},children:"code"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:">ShippingForm is artificially slowed down!"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#85E89D"},children:"label"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" Number of items:"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#85E89D"},children:"button"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" type"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"button"'}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" onClick"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"{() "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"=>"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" setCount"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"(count "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"-"}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:" 1"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:")}>\u2013"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" {count}"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#85E89D"},children:"button"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" type"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"button"'}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" onClick"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"{() "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"=>"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" setCount"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"(count "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"+"}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:" 1"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:")}>+"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#85E89D"},children:"label"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" Street:"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#85E89D"},children:"input"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" name"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"street"'}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" />"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#85E89D"},children:"label"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" City:"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#85E89D"},children:"input"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" name"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"city"'}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" />"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#85E89D"},children:"label"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" Postal code:"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#85E89D"},children:"input"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" name"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"zipCode"'}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" />"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#85E89D"},children:"button"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" type"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"submit"'}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:">Submit"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" );"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"});"})}),` `,(0,n.jsx)(e.span,{"data-line":""}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"export"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" default"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ShippingForm;"})]})]})})}),` `,(0,n.jsx)(e.hr,{}),` `,(0,n.jsxs)(e.h2,{id:"how-to-make-custom-hooks-in-reactjs",children:["How to make custom Hooks in reactjs?",(0,n.jsx)(e.a,{"aria-hidden":"true",tabIndex:"-1",href:"#how-to-make-custom-hooks-in-reactjs",children:(0,n.jsx)(e.span,{className:"icon icon-link"})})]}),` `,(0,n.jsx)(e.p,{children:"React comes with several built-in Hooks like useState, useContext, and useEffect. Sometimes, you\u2019ll wish that there was a Hook for some more specific purpose: for example, to fetch data, to keep track of whether the user is online, or to connect to a chat room. You might not find these Hooks in React, but you can create your own Hooks for your application\u2019s needs."}),` `,(0,n.jsx)(e.figure,{"data-rehype-pretty-code-figure":"",children:(0,n.jsx)(e.pre,{style:{backgroundColor:"#24292e",color:"#e1e4e8"},tabIndex:"0","data-language":"js","data-theme":"github-dark",children:(0,n.jsxs)(e.code,{"data-language":"js","data-theme":"github-dark",children:[(0,n.jsx)(e.span,{"data-line":""}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" { useState, useEffect } "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:" 'react'"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,n.jsx)(e.span,{"data-line":""}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"export"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" function"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" useOnlineStatus"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"() {"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" const"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ["}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"isOnline"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:", "}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"setIsOnline"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"] "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" useState"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"("}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"true"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:");"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" useEffect"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"(() "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"=>"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" function"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" handleOnline"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"() {"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" setIsOnline"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"("}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"true"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:");"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" }"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" function"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" handleOffline"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"() {"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" setIsOnline"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"("}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"false"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:");"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" }"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" window."}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:"addEventListener"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"("}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:"'online'"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:", handleOnline);"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" window."}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:"addEventListener"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"("}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:"'offline'"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:", handleOffline);"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" return"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" () "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"=>"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" window."}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:"removeEventListener"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"("}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:"'online'"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:", handleOnline);"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" window."}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:"removeEventListener"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"("}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:"'offline'"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:", handleOffline);"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" };"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" }, []);"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" return"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" isOnline;"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"}"})})]})})}),` `,(0,n.jsx)(e.hr,{}),` `,(0,n.jsxs)(e.h2,{id:"what-is-higher-order-components",children:["What is Higher Order Components?",(0,n.jsx)(e.a,{"aria-hidden":"true",tabIndex:"-1",href:"#what-is-higher-order-components",children:(0,n.jsx)(e.span,{className:"icon icon-link"})})]}),` `,(0,n.jsx)(e.p,{children:"Higher-Order Component(HOC) is a function that takes in a component and returns a new component."}),` `,(0,n.jsxs)(e.h2,{id:"when-do-we-need-a-higher-order-component",children:["When do we need a Higher Order Component?",(0,n.jsx)(e.a,{"aria-hidden":"true",tabIndex:"-1",href:"#when-do-we-need-a-higher-order-component",children:(0,n.jsx)(e.span,{className:"icon icon-link"})})]}),` `,(0,n.jsx)(e.p,{children:"While developing React applications, we might develop components that are quite similar to each other with minute differences. In most cases, developing similar components might not be an issue but, while developing larger applications we need to keep our code DRY, therefore, we want an abstraction that allows us to define this logic in a single place and share it across components. HOC allows us to create that abstraction."}),` `,(0,n.jsx)(e.p,{children:"Example of a HOC:"}),` `,(0,n.jsx)(e.figure,{"data-rehype-pretty-code-figure":"",children:(0,n.jsx)(e.pre,{style:{backgroundColor:"#24292e",color:"#e1e4e8"},tabIndex:"0","data-language":"js","data-theme":"github-dark",children:(0,n.jsxs)(e.code,{"data-language":"js","data-theme":"github-dark",children:[(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#6A737D"},children:"// HOC.js"})}),` `,(0,n.jsx)(e.span,{"data-line":""}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" React, {Component} "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:" 'react'"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,n.jsx)(e.span,{"data-line":""}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"export"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" default"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" function"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" Hoc"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"("}),(0,n.jsx)(e.span,{style:{color:"#FFAB70"},children:"HocComponent"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"){"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" return"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" function"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" Component"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"(){"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" render"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"(){"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" return"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#85E89D"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"HocComponent"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsx)(e.span,{"data-line":""}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" );"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" }"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" } "})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"}"})})]})})}),` `,(0,n.jsx)(e.figure,{"data-rehype-pretty-code-figure":"",children:(0,n.jsx)(e.pre,{style:{backgroundColor:"#24292e",color:"#e1e4e8"},tabIndex:"0","data-language":"js","data-theme":"github-dark",children:(0,n.jsxs)(e.code,{"data-language":"js","data-theme":"github-dark",children:[(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" React, { Component } "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:" 'react'"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" Hoc "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:" './HOC'"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,n.jsx)(e.span,{"data-line":""}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"function"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" App"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"() {"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" return"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#85E89D"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" Higher-Order Component"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" )"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"}"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"const"}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:" App"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" ="}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" Hoc"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"(App);"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"export"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" default"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" App;"})]})]})})}),` `,(0,n.jsx)(e.hr,{})]})}function h(l={}){let{wrapper:e}=l.components||{};return e?(0,n.jsx)(e,{...l,children:(0,n.jsx)(d,{...l})}):d(l)}return b(w);})(); ;return Component;

#react

What’s New in React19: Key Features and Enhancements

react

Top reactjs questions asked in interview

react