c5336879.aaaa3bb9.js

(window.webpackJsonp=window.webpackJsonp||[]).push([[52],{155:function(e,t,n){"use strict";n.r(t),n.d(t,"frontMatter",(function(){return i})),n.d(t,"metadata",(function(){return c})),n.d(t,"rightToc",(function(){return l})),n.d(t,"default",(function(){return b}));var o=n(2),a=n(7),r=(n(0),n(174)),i={id:"hooks_intro",title:"React Hooks Introduction \ud83c\udfa3",sidebar_label:"Introduction"},c={id:"react/hooks/hooks_intro",isDocsHomePage:!1,title:"React Hooks Introduction \ud83c\udfa3",description:"1. Why hooks when there is a class",source:"@site/docs/react/hooks/hooks_intro.md",permalink:"/docs/react/hooks/hooks_intro",lastUpdatedBy:"Abhin Pai",lastUpdatedAt:1593968799,sidebar_label:"Introduction",sidebar:"docs",previous:{title:"Profiling React Application \ud83d\udd0e",permalink:"/docs/react/react_profile"},next:{title:"useState a state hook \ud83d\udccc",permalink:"/docs/react/hooks/hooks_state"}},l=[{value:"Introduction",id:"introduction",children:[]},{value:"List of built-in React Hooks",id:"list-of-built-in-react-hooks",children:[]}],s={rightToc:l};function b(e){var t=e.components,n=Object(a.a)(e,["components"]);return Object(r.b)("wrapper",Object(o.a)({},s,n,{components:t,mdxType:"MDXLayout"}),Object(r.b)("div",{className:"admonition admonition-note alert alert--secondary"},Object(r.b)("div",Object(o.a)({parentName:"div"},{className:"admonition-heading"}),Object(r.b)("h5",{parentName:"div"},Object(r.b)("span",Object(o.a)({parentName:"h5"},{className:"admonition-icon"}),Object(r.b)("svg",Object(o.a)({parentName:"span"},{xmlns:"http://www.w3.org/2000/svg",width:"14",height:"16",viewBox:"0 0 14 16"}),Object(r.b)("path",Object(o.a)({parentName:"svg"},{fillRule:"evenodd",d:"M6.3 5.69a.942.942 0 0 1-.28-.7c0-.28.09-.52.28-.7.19-.18.42-.28.7-.28.28 0 .52.09.7.28.18.19.28.42.28.7 0 .28-.09.52-.28.7a1 1 0 0 1-.7.3c-.28 0-.52-.11-.7-.3zM8 7.99c-.02-.25-.11-.48-.31-.69-.2-.19-.42-.3-.69-.31H6c-.27.02-.48.13-.69.31-.2.2-.3.44-.31.69h1v3c.02.27.11.5.31.69.2.2.42.31.69.31h1c.27 0 .48-.11.69-.31.2-.19.3-.42.31-.69H8V7.98v.01zM7 2.3c-3.14 0-5.7 2.54-5.7 5.68 0 3.14 2.56 5.7 5.7 5.7s5.7-2.55 5.7-5.7c0-3.15-2.56-5.69-5.7-5.69v.01zM7 .98c3.86 0 7 3.14 7 7s-3.14 7-7 7-7-3.12-7-7 3.14-7 7-7z"})))),"Questions \ud83e\udd14")),Object(r.b)("div",Object(o.a)({parentName:"div"},{className:"admonition-content"}),Object(r.b)("ol",{parentName:"div"},Object(r.b)("li",{parentName:"ol"},Object(r.b)("p",{parentName:"li"},Object(r.b)("strong",{parentName:"p"},"Why hooks when there is a class")," ",Object(r.b)("br",null),"\nHooks are simple, robust and flexible. We can trim no of lines, can call and maintain lifecycle method execution using ",Object(r.b)("inlineCode",{parentName:"p"},"useEffect"),", Provide a flexibility of sharing logic that wasn\u2019t possible in React components before.")),Object(r.b)("li",{parentName:"ol"},Object(r.b)("p",{parentName:"li"},Object(r.b)("strong",{parentName:"p"},"What problems hooks can solve")," ",Object(r.b)("br",null),"\n\ud83d\udd38 ",Object(r.b)("inlineCode",{parentName:"p"},"Wrapper Hell (Reusable Logic)"),", As application grows maintainability will be very difficult we will be endup by adding to many element to the DOM tree which may led to performance ",Object(r.b)("br",null),"\n\ud83d\udd38 ",Object(r.b)("inlineCode",{parentName:"p"},"Huge Components")," trouble of having multiple life cycle methods and complex components are hard to understand"),Object(r.b)("pre",{parentName:"li"},Object(r.b)("code",Object(o.a)({parentName:"pre"},{className:"language-jsx"}),"    componentDidMount() {\n        this.subscribeToStatus(id);\n    }\n\n    componentDidUpdate(prevProps) {\n        prevProps != props ? true : false;\n    }\n\n    componentWillUnmount() {\n        this.unsubscribeToStatus(id);\n    }\n")),Object(r.b)("p",{parentName:"li"},"\ud83d\udd38 ",Object(r.b)("inlineCode",{parentName:"p"},"Confusing Classes"),", Classes confuse both people and machines"))))),Object(r.b)("h2",{id:"introduction"},"Introduction"),Object(r.b)("p",null,"Hooks are a new player in React 16.8. They let you to use stateful logic between the components. These are the special function which hooks into the the context and can let you to use it later"),Object(r.b)("p",null,"Hooks let you split one component into smaller functions based on what pieces are related (such as setting up a subscription or fetching data)"),Object(r.b)("p",null,"Hooks let us split the code based on what it is doing rather than a lifecycle method name. React will apply every effect used by the component, in the order they were specified."),Object(r.b)("h2",{id:"list-of-built-in-react-hooks"},"List of built-in React Hooks"),Object(r.b)("p",null,"React provided many built-in hooks those are "),Object(r.b)("ul",null,Object(r.b)("li",{parentName:"ul"},"\ud83d\udccc ",Object(r.b)("inlineCode",{parentName:"li"},"useState()")),Object(r.b)("li",{parentName:"ul"},"\u26a1\ufe0f ",Object(r.b)("inlineCode",{parentName:"li"},"useEffect()")," "),Object(r.b)("li",{parentName:"ul"},"\ud83e\uddf5 ",Object(r.b)("inlineCode",{parentName:"li"},"useContext()")," "),Object(r.b)("li",{parentName:"ul"},"\ud83d\udcbe ",Object(r.b)("inlineCode",{parentName:"li"},"useMemo()")," "),Object(r.b)("li",{parentName:"ul"},"\u2702\ufe0f ",Object(r.b)("inlineCode",{parentName:"li"},"useReducer()"))),Object(r.b)("p",null,Object(r.b)("strong",{parentName:"p"},"I recommend to watch ",Object(r.b)("a",Object(o.a)({parentName:"strong"},{href:"https://twitter.com/dan_abramov"}),"Dan Abramov")," and ",Object(r.b)("a",Object(o.a)({parentName:"strong"},{href:"https://twitter.com/ryanflorence"}),"Ryan Florence")," video on React Hooks it really awesome")),Object(r.b)("iframe",{width:"100%",height:"315",src:"https://www.youtube-nocookie.com/embed/dpw9EHDh2bM",frameBorder:"0",allow:"accelerometer; encrypted-media; gyroscope; picture-in-picture",allowFullScreen:!0}))}b.isMDXComponent=!0},174:function(e,t,n){"use strict";n.d(t,"a",(function(){return p})),n.d(t,"b",(function(){return m}));var o=n(0),a=n.n(o);function r(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function i(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);t&&(o=o.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,o)}return n}function c(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?i(Object(n),!0).forEach((function(t){r(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):i(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function l(e,t){if(null==e)return{};var n,o,a=function(e,t){if(null==e)return{};var n,o,a={},r=Object.keys(e);for(o=0;o<r.length;o++)n=r[o],t.indexOf(n)>=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);for(o=0;o<r.length;o++)n=r[o],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var s=a.a.createContext({}),b=function(e){var t=a.a.useContext(s),n=t;return e&&(n="function"==typeof e?e(t):c(c({},t),e)),n},p=function(e){var t=b(e.components);return a.a.createElement(s.Provider,{value:t},e.children)},u={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},d=a.a.forwardRef((function(e,t){var n=e.components,o=e.mdxType,r=e.originalType,i=e.parentName,s=l(e,["components","mdxType","originalType","parentName"]),p=b(n),d=o,m=p["".concat(i,".").concat(d)]||p[d]||u[d]||r;return n?a.a.createElement(m,c(c({ref:t},s),{},{components:n})):a.a.createElement(m,c({ref:t},s))}));function m(e,t){var n=arguments,o=t&&t.mdxType;if("string"==typeof e||o){var r=n.length,i=new Array(r);i[0]=d;var c={};for(var l in t)hasOwnProperty.call(t,l)&&(c[l]=t[l]);c.originalType=e,c.mdxType="string"==typeof e?e:o,i[1]=c;for(var s=2;s<r;s++)i[s]=n[s];return a.a.createElement.apply(null,i)}return a.a.createElement.apply(null,n)}d.displayName="MDXCreateElement"}}]);