{"id":19923614,"url":"https://github.com/sukarnascience/react_learning","last_synced_at":"2025-03-01T10:20:48.457Z","repository":{"id":37579519,"uuid":"365138001","full_name":"Sukarnascience/React_Learning","owner":"Sukarnascience","description":"Learning Stage Of Full Stack JavaScript","archived":false,"fork":false,"pushed_at":"2021-06-25T09:35:12.000Z","size":1416,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-12T00:16:57.540Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Sukarnascience.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-05-07T06:37:02.000Z","updated_at":"2022-09-11T05:25:22.000Z","dependencies_parsed_at":"2022-08-29T09:41:29.261Z","dependency_job_id":null,"html_url":"https://github.com/Sukarnascience/React_Learning","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Sukarnascience%2FReact_Learning","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Sukarnascience%2FReact_Learning/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Sukarnascience%2FReact_Learning/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Sukarnascience%2FReact_Learning/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Sukarnascience","download_url":"https://codeload.github.com/Sukarnascience/React_Learning/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241349166,"owners_count":19948324,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-12T22:14:53.628Z","updated_at":"2025-03-01T10:20:48.430Z","avatar_url":"https://github.com/Sukarnascience.png","language":"JavaScript","readme":"# Full-Stack_JS-React\n\u003e Learning Stage Of Full Stack JavaScript\nYou can use this Repository for your learnig perpose also...\n\n## Installing React \n* hope you have install NODE.JS\n* we can install Globaly or Locally \n* we installed globaly \n```npm install -g create-react-app```\n\u003e in my case i had to use ```sudo npm install -g create-react-app```\n* we will install in a project dir. \n```create-react-app \u003cFolder/project Name\u003e```\n* Install : React Developer Tools For Chrome extension\n* you will get a package.json file in which help to handel all our packages...\n* how to Install new things:\n\u003e what this will do is... it will install and update our package.json file\n```npm install \u003cpackage name\u003e --save```\n* now we will work with src dir.\n\n# Documentation\n * ## [OLD Version (Billow V16.8.0)](#Documentation)\n * ## [With Hooks New Vesrion (Above V16.8.0)](#About-Hooks)\n * I want to give credit to a [YouTube Playlist](https://www.youtube.com/watch?v=QFaFIcGhPoM\u0026list=PLC3y8-rFHvwgg3vaYJgHGnModB54rxOk3) created by [Codevolution](https://www.youtube.com/channel/UC80PWRj_ZU8Zu0HSMNVwKWw) from where i have learn this all stuffs \n\n* ## Components\nin React a components represent a part of the user interface\n * they are reusable\n * components Type:\n 1. Functional Component\n 2. Class Component\n\nexample for Functional Component : \\\nwelcome.js\n``` js\nfunction welcome(props){\n return \u003ch1\u003e Hello, {props.name} \u003c/h1\u003e;\n}\n```\n\nexample for Class Component : \\\ngreet.js\n```js\nclass welcome extends Component{\n render(){\n return \u003ch1\u003e Hello, {this.props.name} \u003c/h1\u003e;\n }\n}\n```\n\nTo use your Component in other file :\\ \nApp.js\n```js\nimport Greet from './components/greet'; // file location\nimport Welcome from './components/welcome'; // file location\n\nfunction App() {\n return (\n \u003cdiv className=\"App\"\u003e\n \u003cGreet /\u003e\n \u003cWelcome /\u003e\n \u003c/div\u003e\n );\n}\n```\n\n* ## uses of JSX and see different without JSX\n * With JSX\n hello.js\n ```js\n import React from \"react\";\n const Hello = () =\u003e {\n return(\n \u003cp\u003eHello.. hehee! It's is a JSX function\u003c/p\u003e\n );\n }\n export default Hello;\n ```\n * Without JSX\n hellohi.js\n ```js\n import React from \"react\";\n const Hellohi = () =\u003e {\n return React.createElement('div',null,React.createElement('h3',null,\"without JSX\"))\n }\n export default Hellohi;\n ```\n the 2nd parameter in create elements is for object key value pairs \n that will be appended to the elements \\\n eg: we need id attributes in div tag\n ```js\n return React.createElement('div',{id:\"hello\"},React.createElement('h3',null,\"without JSX\"))\n ```\n Output will be: ```\u003cdiv id=\"hello\"\u003e\u003ch3\u003ewithout JSX\u003c/h3\u003e\u003c/div\u003e```\\\n * ### JSX difference\n 1. class -\u003e className\n 2. for -\u003e htmlFor\n 3. camelCase property nameing convention\n a. onclick -\u003e onClick\n b. tabindex-\u003e tabindex\n* ## Use of Props and State\n * ### Props:\n props -\u003e properties is the optional input that your components\n can accept its ... also the components are dianamic...\n \u003e Porps are immutable\n eg: In App.js\n ```js\n import MyPropsFun from '\u003c--path--\u003e';\n // and in app function use the tag\n \u003cMyPropsFun name=\"Sukarna Jana\" age=\"17+\"\u003e\n Hii its me the childern\n \u003c/MyPropsFun\u003e\n ```\n Now lets make it in suprate file:\\\n Using : Function....\n learnProps.js\n ```js\n import React from 'React';\n const MyPropFun = (props) =\u003e {\n console.log()\n return(\n \u003cdiv\u003e\n \u003ch1\u003eWelcome {props.name}\u003c/h1\u003e\n \u003ch2\u003eYour Age is :{props.age}\u003c/h1\u003e\n {props.childern}\n \u003c/div\u003e\n )\n }\n export default MyPropFun;\n ```\n Using : Class....\n learnProps.js\n ```js\n import React,{Component} from 'React';\n class MyPropsFun extends Component{\n render(){\n return(\n \u003cdiv\u003e\n \u003ch1\u003eWelcome {this.props.name}\u003c/h1\u003e\n \u003ch2\u003eYour Age is :{this.props.age}\u003c/h1\u003e\n {props.childern}\n \u003c/div\u003e\n )\n }\n }\n export default MyPropsFun;\n ```\n * ### State:\n state is managed with in the component and varibles declared in the funcation body\n \u003e its mutable (State can be changed)\n eg: learnstate.js\n ```js\n import React,{Component} from 'React';\n class MyStateFun extends Component{\n constructor(){\n super()\n this.state = {\n message:\"Give us a star\"\n }\n }\n changeDataOut(){\n this.setState({\n message:\"Thanks Your Liking me\"\n })\n }\n render(){\n return(\n \u003cdiv\u003e\n \u003ch1\u003e{this.state.message}\u003c/h1\u003e\n \u003cbutton onClick={()=\u003ethis.changeDataOut()}\u003eLike\u003c/button\u003e\n \u003c/div\u003e\n )\n }\n }\n export default MyStateFun;\n ```\n and in App.js\n ```js\n import MyStateFun from '\u003c--path--\u003e';\n // and in App function \n \u003cMyStateFun /\u003e\n ```\n* ## Use Of setState method:\n\n to understand a do and dont with state and setState let us see \\\n eg : lets check by increment on every click\n ```js\n import React,{Component} from 'react'\n\n class ClickCount extends Component{\n constructor(){\n super()\n this.state={\n count:0\n }\n }\n increment(){\n this.setState({\n count:this.state.count + 1\n })\n }\n render(){\n return(\n \u003cdiv\u003e\n \u003cp\u003eYou have clicked this button : {this.state.count}\u003c/p\u003e\n \u003cbutton onClick={()=\u003ethis.increment()}\u003eClick\u003c/button\u003e\n \u003c/div\u003e\n )\n }\n }\n ```\n * When ever we are going to change the set dont do directly ib a function\n you can change the state when its under constructor to change the state \n in a function you need to use setState method\n * setState method has 2 parameters 1st is for the object and 2nd is for \n call back function\n * \u003e if you see console.log of state value it will be the previous state\n So, if you need to execute some code only after the state has been \n updated then you need to use call back function to apply this\n * let us assume i want to increment by 5 in above example\n ```js\n incrementFive(){\n increment()\n increment()\n increment()\n increment()\n increment()\n }\n ```\n but it is not going to increment 5 times because react render it together \n so for that...\n ```js\n increment(){\n // if you need multiple parameter then use (pervState,~,~)\n this.setState(prevState=\u003e({\n count:pervState.count+1\n }))\n }\n ```\n So, if you do now then you are going to increment 5 times \n * ### Summary\n * always make use of setState and never modify the state directly\n * code has will be executed after the state has been updated so Place\n that code in the call back function which is our 2 argument in setState method\n * when you have to update state based on the pervious state value then pass in a \n function as a 1st argument of setState method which is known as obejct\n* ## Destructuring props and state\n * Destructuring is an es6 feature thats make its possible to unpack variables\n from arrays and properties from object into distinct variables\n * in react restructuring props and state improves code readability\n * there are 2 ways that we can use in functional components are:\n 1. Structuring in the parameters\n Eg: in App.js import our examble file and type\n ```js \n \u003cLringStructur name=\"sj\" age=17/\u003e\n ``` \n and in our example file .js\n ```js\n const LringStructur = ({name,age})=\u003e {\n return(\u003cp\u003eHello {name} and your age is {age}\u003c/p\u003e)\n }\n ```\n 2. Destructuring in function body \n ```js\n const LringStructur = props =\u003e {\n const {name,age} = props\n return(\u003cp\u003eHello {name} and your age is {age}\u003c/p\u003e)\n }\n ```\n in Class components\n ```js\n class welcome extends Components {\n render(){\n const {name,age} = this.props\n // its same in state type also \n const {state1,state2} = this.state\n return(\u003cp\u003eHello {name} and your age is {age}\u003c/p\u003e)\n }\n }\n ```\n* ## Event Handling\n * any web application you create sometimes its has user interface...\n * when the user intaractact with your application then the evets are fired\\\n eg:\n 1. mouse click\n 2. mouse over\n 3. keypress\n 4. change event \\\n etc.... many more\n * react events named using camel case\n \u003e ```clickHandler```: is a function\n \u003e ```clickHandler()```: is a function call\n * eg: if we use this :- ```clickHandler()``` on button click function then \n it's means the function will already is called, and when we click into that \n button nothing will happen...\n \u003e event handler is a function not a function call\n eg:\n ```js\n class LearnEventHandler extends Component{\n changeDataOut(){\n console.log(\"event has been handled\")\n }\n render(){\n return(\u003cbutton onClick={this.changeDataOut}\u003eEvent Handler\u003c/button\u003e)\n }\n }\n ```\n* ## Binding Event Handlers\n * reason of binding event handler is purely because of ```this.```\n keyword in js file... it's not because of react\n * eg: eventbind.js\\\n by creating a class and using event handler using ```this.```\n keyword will be undefine with in a function\n \u003e you should have better knowledge of ```this.``` keyword use.\n ```js\n class MyStateFun extends Component{\n constructor(){\n super()\n this.state = {\n msg:\"Give us a star\"\n }\n }\n changeDataOut(){\n this.setState({\n msg:\"Thanks Your for Liking me\"\n })\n }\n render(){\n return(\n \u003cdiv\u003e\n \u003cp\u003e{this.state.msg}\u003c/p\u003e\n \u003cbutton onClick={this.changeDataOut}\u003eLike me\u003c/button\u003e\n \u003c/div\u003e \n )\n }\n }\n ```\n we will get a error that \u003cb\u003ethis is undefine\u003c/b\u003e because this is not define under a event handler\n \u003e ```this``` keyword is undefined in an event handler that is the reason why it's necessary to learn event binding react class component\n * There are multiple types of event handlers list goes something like this:\n 1. Using bind keyword\n ```\u003cbutton onClick={this.changeDataOut.bind(this)}\u003eLike me\u003c/button\u003e```\n Every update to the status cause the component to rerender and this in return brand new event handler on every render...\\\n \u003e It can create a issue at component that content nested childrens component\n 2. Use arrow function in render method\n ```\u003cbutton onClick={()=\u003ethis.changeDataOut()}\u003eLike me\u003c/button\u003e```\n 3. binding the event handler in the construct as a post to binding in the rerender method\n ```js\n constructor(){\n super()\n this.state = {\n msg:\"Give us a star\"\n }\n this.changeDataOut = this.changeDataOut.bind(this)\n }\n changeDataOut(){\n this.setState({\n msg:\"Thanks Your for Liking me\"\n })\n }\n render(){\n return(\n \u003cdiv\u003e\n \u003cp\u003e{this.state.msg}\u003c/p\u003e\n \u003cbutton onClick={this.changeDataOut}\u003eLike me\u003c/button\u003e\n \u003c/div\u003e \n )\n }\n ```\n 4. Using a arrow function as a class property\n ```js\n constructor(){\n super()\n this.state = {\n msg:\"Give us a star\"\n }\n }\n changeDataOut=()=\u003e{\n this.setState({\n msg:\"Thanks Your for Liking me\"\n })\n }\n render(){\n return(\n \u003cdiv\u003e\n \u003cp\u003e{this.state.msg}\u003c/p\u003e\n \u003cbutton onClick={this.changeDataOut}\u003eLike me\u003c/button\u003e\n \u003c/div\u003e \n )\n }\n ```\n* ## Methods as props\n * Using parent component can pass down props to the childrens component but if a child\n component wanted To communicate with the parents component then we still can use props\n but this time we pass in a reference Tu to a method as props to the child component\n * eg: I want to call a method in the parent component from a button in a child component\n So we will create two files one will be parents.js another will be children.js\\\n parents.js\n ```js\n import Childern from './childern';\n\n class Parents extends Component{\n constructor(props){\n super()\n this.state = {\n defmsg:\"Dear,\"\n }\n this.callpopupalert = this.callpopupalert.bind(this)\n }\n callpopupalert(){\n alert(`Hello ${this.state.defmsg}`)\n }\n */\n render(){\n return(\n \u003cdiv\u003e\n \u003cChildern popupalert = {this.callpopupalert}/\u003e\n \u003c/div\u003e\n )\n }\n }\n ```\n children.js\n ```js\n function Childern(props){\n return(\n \u003cdiv\u003e\n \u003cbutton onClick={props.popupalert}\u003eAlert plz\u003c/button\u003e\n \u003c/div\u003e\n )\n }\n ```\n \u003e So if you need to pass a parameter by calling parent method you can do like:\\\n In parents.js ```\u003cbutton onClick={()=\u003e props.popupalert('Sukarna')}\u003ealert\u003c/button\u003e```\\\n and In childrens.js ```popupalert(msg){alert(`Hello ${this.state.defmsg} ${msg}`)}```\n\n* ## Conditional Rendering\n * when you build a react application you may need to show or hide the HTML based on the conditon \n * there are different type of contion in react:\n 1. if/else\n it's like :\\\n create a class component and in that we will change the state based on if/else...\n ```js\n // inside constructor...\n this.state = { permition: false }\n render(){\n if(this.state.permition){\n return \u003cp\u003ewow you are allowed\u003c/p\u003e\n } else{\n return \u003cp\u003esorry you are not allowed\u003c/p\u003e\n }\n }\n ```\n 2. element variables\n ```js\n render(){\n let msg\n if(this.state.permition){\n msg = \u003cp\u003ewow you are allowed\u003c/p\u003e\n } else{\n msg = \u003cp\u003esorry you are not allowed\u003c/p\u003e\n }\n return(\u003cdiv\u003e{msg}\u003c/div\u003e)\n }\n ```\n 3. ternary conditionl operator\n * we can use this under JSX\n ```js\n render(){\n return(\n this.state.permition ? \u003cp\u003ewow\u003c/p\u003e : \u003cp\u003eoops\u003c/p\u003e\n )\n }\n ```\n 4. short circuit operator\n * do or just leave \n ```js\n render(){\n return(\n this.state.permition \u0026\u0026 \u003cp\u003ewow\u003c/p\u003e\n )\n }\n ```\n\n* ## List Rendaring\n * sometimes you might have to display list of datas...\n * in JS we have a *map method* to itterate over array and return with changes\n * ### quick look of ```map``` method\n * the *map()* method creates a new array with the results of calling a provided function\n on every elements in the array\n ```js\n var myarray = [1,2,3,4]\n const mapping = myarray.map(x =\u003e x*2)\n console.log(mapping)\n // Output : [2,4,6,8]\n ```\n * we can handel list in some ways like :\n 1. \n ```js\n const name = [\"Sukarna\",\"spoothi\",\"poomee\"]\n return(\n \u003cdiv\u003e\n \u003cp\u003e{name[0]}\u003c/p\u003e\n \u003cp\u003e{name[1]}\u003c/p\u003e\n \u003cp\u003e{name[2]}\u003c/p\u003e\n \u003c/div\u003e\n )\n ```\n 2. \n ```js\n const name = [\"Sukarna\",\"spoothi\",\"poomee\"]\n return(\n \u003cdiv\u003e\n {\n data = name.map(x =\u003e \u003cp\u003e{x}\u003c/p\u003e)\n }\n \u003c/div\u003e\n )\n // OR\n const data = name.map(x =\u003e \u003cp\u003e{x}\u003c/p\u003e)\n return(\u003cdiv\u003e{data}\u003c/div\u003e)\n ``` \n 3. if you have multiple data then \n ```js\n const data=[\n {\n id:1,\n name:'Sukarna Jana',\n age:17\n },\n {\n id:2,\n name:'Spoorthi S',\n age:17\n },\n {\n id:3,\n name:'Poornima',\n age:17\n }\n ]\n const datalist = data.map(x =\u003e (\n \u003cp\u003eName:{x.name}, Age:{x.age}\u003c/p\u003e\n ))\n ```\n \u003e But doing in this way you will see a error in console\n ```Each child in an array or interalor should have a unique \"key\" porps```\n\n * So, we need to see the unique data so as we know our id is unique\n ```js\n const datalist = data.map(x =\u003e (\n \u003cp key={x.id}\u003eName:{x.name}, Age:{x.age}\u003c/p\u003e\n ))\n ```\n \u003e key is a reserved props so you can't use \n\n * ```key``` is a special string attribute you need to include when creating lists as elements\n * key gives the element a stable indentity\n * keys help react to identify which items have changed are added or are removed\n * help in efficient update at the user interface\n\n * ### Index as key\n \u003e avoid if possible\n\n * we can use index of element in the key\n ```js\n const datalist = data.map((x,index) =\u003e (\n \u003cp key={index}\u003e{x}\u003c/p\u003e\n ))\n ```\n 1. the items in your list do not have a unique id (it you have someting unique\n then use that only as a key)\n 2. the list is a static list and will not change (never add item to the list, removing\n items from the list)\n 3. the list will never be reordered or filtred\n\n* ## Styling and CSS Basic\n * styling React Components\n 1. CSS Stylesheets\n file: myStyle.css\n ```css\n .myMainstyle{\n color:#ff00ff\n }\n ```\n file: MainApp.js\n ```js\n import './myStyle.css'\n function App(props){\n let styleType = props.primary? 'myMainstyle':''\n return(\n \u003cp className={styleType}\u003eHello\u003c/p\u003e\n //or\n \u003cp className='myMainstyle'\u003eHello\u003c/p\u003e\n )\n }\n ```\n 2. Inline Styling\n in react inline styles are not specify Instead they are specified object whose keys are camelcase version style name and the value is usually a string\n eg:\n ```js\n function App(){\n const styleType = {\n fontSize:'50px',\n color:'red'\n }\n return(\n \u003cp className={styleType}\u003eHello\u003c/p\u003e\n )\n }\n ```\n 3. CSS Modules\n The module CSS files are be like : ```FILENAME.module.css```\n If we create a stylesheet without a module then it can be implement in all the child component also but if you need to be specific to particular then you need to use CSS module to implement in particular component\n file: myStyle.module.css\n ```css\n .myMainstyle{\n color:#ff00ff\n }\n ```\n file: MainApp.js\n ```js\n import style from './myStyle.module.css'\n function App(){\n return(\n \u003cp className={style.myMainstyle}\u003eHello\u003c/p\u003e\n )\n }\n ```\n 4. CSS in JS Libaries\n \u003e not going to learn now\n\n* ## Form Handling\n * They are also known as *Control Components*\\\n this are elements whoes value is control by react\n * ```onClick={...}``` its fired when ever there is a change in input field.\n * when we submit the form its reload to prevent that \n ```js\n showForm = (event) =\u003e {\n //The task you want to do just do...\n event.preventDefault()//\u003c- it will prevent from reloading the page\n }\n //inside form\n \u003cform onSubmit={this.showForm}\u003e\n \u003cbutton type=\"submit\"\u003eSubmit\u003c/button\u003e\n \u003c/form\u003e\n ```\n * I hope by the bellow example you have get how it's working\n ```js\n class MainForm extends Component{\n constructor(){\n super()\n this.state={\n name:'',\n age:0,\n day:'Sun',\n say:''\n }\n }\n\n writeName = (event) =\u003e{\n this.setState({\n name:event.target.value\n })\n }\n writeAge = (event) =\u003e{\n this.setState({\n age:event.target.value\n })\n }\n writeDay = (event) =\u003e{\n this.setState({\n day:event.target.value\n })\n }\n writeSay = (event) =\u003e{\n this.setState({\n say:event.target.value\n })\n }\n showForm = (event) =\u003e {\n alert(`Great ${this.state.name} Your Form has submited successfuly\\n\n Your Name: ${this.state.name}\\n\n Your Age : ${this.state.age}\\n\n Today is : ${this.state.day}\\n\n Your Quary is : ${this.state.say}`)\n event.preventDefault()\n }\n\n render(){\n return(\n \u003cform onSubmit={this.showForm}\u003e\n \u003cdiv\u003e\n \u003clabel\u003eName\u003c/label\u003e\n \u003cinput type=\"text\" value={this.state.name} onChange={this.writeName}/\u003e\u003cbr/\u003e\n \u003clabel\u003eAge\u003c/label\u003e\n \u003cinput type=\"number\" value={this.state.age} onChange={this.writeAge}/\u003e\u003cbr/\u003e\n \u003clabel\u003eWhat is the Day\u003c/label\u003e\n \u003cselect value={this.state.day} onChange={this.writeDay}\u003e\n \u003coption value=\"Sun\"\u003eSunday\u003c/option\u003e\n \u003coption value=\"Mon\"\u003eMonday\u003c/option\u003e\n \u003coption value=\"Tue\"\u003eTuesday\u003c/option\u003e\n \u003coption value=\"Wed\"\u003eWednesday\u003c/option\u003e\n \u003coption value=\"Thu\"\u003eThursday\u003c/option\u003e\n \u003coption value=\"Fri\"\u003eFriday\u003c/option\u003e\n \u003coption value=\"Sat\"\u003eSaturday\u003c/option\u003e\n \u003c/select\u003e\u003cbr/\u003e\n \u003clabel\u003eWant to say something\u003c/label\u003e\n \u003ctextarea value={this.state.say} onChange={this.writeSay}/\u003e\u003cbr/\u003e\n \u003cbutton type=\"submit\"\u003eSubmit Form\u003c/button\u003e\n \u003c/div\u003e\n \u003c/form\u003e\n )\n }\n }\n ```\n* ## LifeCycle Methods\n * ### Mounting\n * mounting lifecycle are called when an instance of a component is being created and inserted \n into the DOM \\\n eg: ```constructor```,```static getDerivedStateFromProps```,```render``` and ```componentDidMount```\n * ```constructor(props)``` \n * A special function that will get called whenever a new components is created \n * used for initilizing state,binding the event handler\n * do not cause side effects eg:- HTTP Requests.\n * when you create your own components call - ```super(props)``` \u0026 directly overwrite ```this.state```\n * ```static getDerivedStateFromProps(props,state)``` (rerely use lifecycle mount)\n * is used when the state of the component depends on changes in props over time.\n * used for set state (need to return object that represent the new state of the components)\n * do not cause side effect eg:- HTTP requests.\n * ```render()```\n * only required method\n * used for read props \u0026 states and return JSX\n * do not change states or interact with DOM or make ajax calls\n * children components lifecycle methods are also executed\n * ```componentDidMount()```\n * call only once in the whole life cycle of a given component\n * it is invoked immediatly after a component and all its children components have been render fo the DOM\n * used for cause side effect eg:- Interact with the DOM or perform any ajax calls to loud data\n * In CODES its look like \n ```js\n //create a class\n constructor(props){\n super(props)\n this.state={\n data:\"Hi\"\n }\n /* \u003c--- Our Lifecycle A ---\u003e */\n }\n static getDerivedStateFromProps(props,state){\n /* \u003c--- Our Lifecycle B ---\u003e */\n return null\n }\n componentDidMount(){\n /* \u003c--- Our Lifecycle D ---\u003e */\n }\n return(){\n /* \u003c--- Our Lifecycle C ---\u003e */\n return \u003cp\u003e hi \u003c/p\u003e\n }\n ```\n if a component has a child component thin the flow will be :- \\\n ```js\n /* \u003c--- Our Lifecycle A1 ---\u003e */\n /* \u003c--- Our Lifecycle B1 ---\u003e */\n /* \u003c--- Our Lifecycle C1 ---\u003e */\n /* \u003c--- Our Lifecycle A2 ---\u003e */\n /* \u003c--- Our Lifecycle B2 ---\u003e */\n /* \u003c--- Our Lifecycle C2 ---\u003e */\n /* \u003c--- Our Lifecycle D2 ---\u003e */\n /* \u003c--- Our Lifecycle D1 ---\u003e */\n ```\n * ### Updating\n * when a component is being re-rendered as a result of changes to either its props or state\\\n eg: ```getSnapshotBeforeUpdate```,```static getDerivedStateFromProps```,\n ```shouldComponentUpdate```,```render``` and ```componentDidUpdate```\n * ```static getDeriveStateFromProps(props,state)```\n * this is a statis method which recive props and state as a parameter and has to return null or object - repesent state of the component\n * method is called everytime a component is re-rendered\n * is used to set the state\n * do not cause any side effect eg: HTTP requests\n * ```shouldComponentUpdate(next props,next state)```\n * detects is the component should re-render or not\\\n ( Defalt: class component re-render on every changes )\\\n So, to prevent that we use this\n * performance optimization\n * do not cause side effect eg: HTTP request...\n * calling the setState method\n * ```render()```\n * only required method \n * read props \u0026 state and return JSX\n * do not change state or interact with DOM or make ajax calls\n * ```getSnapshotBeforeUpdate(perv Props, prev State)```\n * called right before the changes from the virtual DOM are to be certified in DOM\n * capture some information from the DOM\n * method will either return null or return a value\n * render value will be passed as the 3rd parameter to the next method\n * ```componentDidUpdate(prev Props, prev State, snapshot)```\n * called after the render is finished in the re-render cycles\n * cause side effects\n * In CODES its look like \n ```js\n //create a class\n constructor(props){\n super(props)\n this.state={\n data:\"Hi\"\n }\n }\n static getDerivedStateFromProps(props,state){\n /* \u003c--- Our Lifecycle A ---\u003e */\n return null\n }\n shouldComponentUpdate(){\n /* \u003c--- Our Lifecycle B ---\u003e */\n return true\n }\n getSnapshotBeforeUpdate(prev props,prev state){\n /* \u003c--- Our Lifecycle D ---\u003e */\n return null\n }\n componentDidUpdate(){\n /* \u003c--- Our Lifecycle E ---\u003e */\n }\n change=()=\u003e{\n this.setState({\n data:\"hello\"\n })\n }\n return(){\n /* \u003c--- Our Lifecycle C ---\u003e */\n return \u003cbutton onCLick={this.change}\u003eState changes\u003c/button\u003e\n }\n ```\n if there is a child component too then\n ```js\n /* \u003c--- Our Lifecycle A1 ---\u003e */\n /* \u003c--- Our Lifecycle B1 ---\u003e */\n /* \u003c--- Our Lifecycle C1 ---\u003e */\n /* \u003c--- Our Lifecycle A2 ---\u003e */\n /* \u003c--- Our Lifecycle B2 ---\u003e */\n /* \u003c--- Our Lifecycle C2 ---\u003e */\n /* \u003c--- Our Lifecycle D2 ---\u003e */\n /* \u003c--- Our Lifecycle D1 ---\u003e */\n ```\n if once both child \u0026 parents are done then ```getSnapshotBeforeUpdate(perv Props, prev State)``` will be\n ```js\n //...\n /* \u003c--- Our Lifecycle D2 ---\u003e */\n /* \u003c--- Our Lifecycle E2 ---\u003e */\n /* \u003c--- Our Lifecycle D1 ---\u003e */\n /* \u003c--- Our Lifecycle E1 ---\u003e */\n ```\n * ### Unmounting\n * when a component is being removed from DOM eg: ```componentWillUnmount```\n * ```componentWillUnmount```\n * method is invoked immediately before a component is unmounted and distroyed\n * (clean up task) cancelling any network requests removing event handaler, cancelling any subscription and also invalidating timers\n * do not call the setState method\n * ### Error Handaling\n * when there is an error during rendering in a lifecycle method or in the constructor of any child component eg: ```static getDerivedStateFromError``` and ```componentDidCatch``` \n * ```static getDerivedStateFromError(error)``` \n * ```componentDidCatch(error,info)```\n\n* ## Fragments\n * A common pattern in react is for a component to render multiple elements \n * fragments let you group a list of children without adding extra nodes to the DOM\n * eg:\n ```js\n function Mydata(){\n return(\n \u003cdiv\u003e\n \u003ch3\u003e Data 1 \u003c/h3\u003e\n \u003cp\u003e Data 2 \u003c/p\u003e\n \u003c/div\u003e\n )\n }\n // we commenly wright in this way but this is adding a useless tag \n /*\n * if we inspect app.js or browser\n * \u003cdiv\u003e \u003c- of app.js\n * \u003cdiv\u003e \u003c- of components\n * \u003ch3\u003e Data 1 \u003c/h3\u003e\n * \u003cp\u003e Data 2 \u003c/p\u003e\n * \u003c/div\u003e\n * \u003c/div\u003e\n */\n ```\n SO, to get rid of that extra ```\u003cdiv\u003e``` tag\n ```js\n function Mydata(){\n return(\n \u003cReact.Fragment\u003e\n \u003ch3\u003e Data 1 \u003c/h3\u003e\n \u003cp\u003e Data 2 \u003c/p\u003e\n \u003c/React.Fragment\u003e\n )\n }\n ```\n * more practical use will be like:\n \u003e create 2 files\n * file1.js\n ```js\n \u003cdiv\u003e\n \u003ch2\u003eTable:-\u003c/h2\u003e\n \u003ctable\u003e\n \u003ctbody\u003e\n \u003ctr\u003e\n \u003cth\u003eName\u003c/th\u003e\n \u003cth\u003eRelation\u003c/th\u003e\n \u003cth\u003eDOB\u003c/th\u003e\n \u003c/tr\u003e\n \u003cfile2/\u003e\n \u003c/tbody\u003e\n \u003c/table\u003e\n \u003c/div\u003e\n ```\n * file2.js\n ```js\n //if we use\n \u003cdiv\u003e\n \u003ctr\u003e\n \u003ctd\u003eSukarna Jana\u003c/td\u003e\n \u003ctd\u003eAuthor of this page\u003c/td\u003e\n \u003ctd\u003e19-09-2003\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003eSpoorthi S\u003c/td\u003e\n \u003ctd\u003eAuthor's Best Friend\u003c/td\u003e\n \u003ctd\u003e05-08-2003\u003c/td\u003e\n \u003c/tr\u003e\n \u003c/div\u003e\n ```\n then we will get a error on console because in table child component should not have ```\u003cdiv\u003e``` in between SO, its wrong then ```\u003cReact.Fragment\u003e``` comes handy\n ```js\n \u003cReact.Fragment\u003e\n \u003ctr\u003e\n \u003ctd\u003eSukarna Jana\u003c/td\u003e\n \u003ctd\u003eAuthor of this page\u003c/td\u003e\n \u003ctd\u003e19-09-2003\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003eSpoorthi S\u003c/td\u003e\n \u003ctd\u003eAuthor's Best Friend\u003c/td\u003e\n \u003ctd\u003e05-08-2003\u003c/td\u003e\n \u003c/tr\u003e\n \u003c/React.Fragment\u003e\n ```\n * ## Pure components\n * to make a pure components: \n ```js\n import React,{PureComponent} from 'react'\n class MyPureCom extends PureComponent{\n /*\n * Your Other code\n */\n }\n ```\n * to understand more properly we will make 3 files\n 1. Parent Component\n ```js\n import React,{Component} from 'react';\n import MyPureComp from './MyPureComp';\n import MyRegularComp from './MyRegularComp';\n\n class ParentOfPureRegular extends Component{\n constructor(props){\n super(props)\n this.state={\n count:0\n }\n }\n componentDidMount(){\n setInterval(() =\u003e {\n this.setState({\n count: 0\n })\n },2000)\n }\n render(){\n console.log(\"this is the Parent of pure and regular component\")\n return(\n \u003cdiv\u003e\n \u003ch3\u003eParent of pure and regular component\u003c/h3\u003e\n \u003cMyPureComp data={this.state.count}/\u003e\n \u003cMyRegularComp data={this.state.count}/\u003e\n \u003c/div\u003e\n )\n }\n }\n ```\n 2. Pure component\n ```js\n import React,{PureComponent} from 'react';\n\n class MyPureComp extends PureComponent{\n render(){\n console.log(\"Pure Component is re-rendered\")\n return(\n \u003cp\u003eThis Pure Component has been re-render {this.props.data} (See in console)\u003c/p\u003e\n )\n }\n }\n\n export default MyPureComp;\n ```\n 3. Regular Component\n ```js\n import React,{Component} from 'react';\n\n class MyRegularComp extends Component{\n render(){\n console.log(\"Regular Component is re-rendered\")\n return(\n \u003cp\u003eThis Regular Component has been re-render {this.props.data} (See in console)\u003c/p\u003e\n )\n }\n }\n\n export default MyRegularComp; \n ```\n * \u003ctable\u003e\n \u003ctr\u003e\n \u003cth\u003eRegular Component\u003c/th\u003e\n \u003cth\u003ePure Component\u003c/th\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003e* A regular component does not implement the ```shouldComponentUpdate()``` method. Its always return true as default\u003c/td\u003e\n \u003ctd\u003e* A pure component on other hand implements ```shouldComponentUpdate()``` method with a shallow propsvand state components\u003c/td\u003e\n \u003c/tr\u003e\n \u003c/table\u003e\n * ### Shallow Comparison (we will call as : SC)\n * #### Primitive Type (num,str,boolen)\n * a SC b return true if a and b have the same value and are of same types\\\n eg: string: 'SJ' SC string: 'SJ' returns true\n * #### Complex Types (object,array...)\n * a SC b returns true if a \u0026 b reference to exact same object\\ eg:\n ```js\n var a = [1,2,3];\n var b = [1,2,3];\n var c = a;\n var ab_eq = (a===b); //false\n var ac_eq = (a===c); //true\n\n /* another example */\n\n var a = {x:1,y:2};\n var b = {x:1,y:2};\n var c = a;\n var ab_eq = (a===b); //false\n var ac_eq = (a===c); //true\n ```\n * SC of prevState with current State\\\n SC of prevProps with current Props\\\n if there is a difference they re-render component\n * if parents not re-render then childeren will also not re-render\n * never mutate the state, always return a new object that reflects the new state\n * #### Pure component : if there is no difference the component is not re-rendering\n - performence Boost\n - its a good idea to ensure that all the childern components are also pure to avoide unexpacted behaviour\n\n* ## Memo \n \u003e version 16.6 above\n * Pure component only re-render the class component when their ia a difference in shallow comparison of props/states\n * prue component only work with class based component\n * to use in function component the same feature then ```React.memo``` comes in place\n * memo(function) == PureComponent(class)\n * eg:- ```MyMemoComp.js```\n ```js\n import React from 'react';\n\n function MyMemoComp({data}){\n console.log(\"Memo Component is re-rendered\")\n return(\n \u003cp\u003eThis Pure Component has been re-render {data} (See in console)\u003c/p\u003e\n )\n }\n\n export default React.memo(MyMemoComp);\n ```\n * in earlear code where parents component re-render in every 2sec. include this child \n ```\u003cMyMemoComp data = {this.props.count} /\u003e```\n * and when we see output memo is render onces and parents keep on re rendering\n\n* ## Refs\n * Refs make possible to access DOM notes directly without react\\\n eg: focasing on a text input (let us asume we have a login now as soon as the page lodes the username input field to be focused)\n * example i want to focus on input while page opens / reload \n * there is 3 steps:\n - Step 1 : (Create a refs)\n ```js\n // inside constructor\n this.inputRef = React.createRef()\n //...\n ```\n - Step 2 : (attach the Refs to our input element in the render method )\n ```js\n // we use 'ref' attribute\n //....\n \u003cinput type=\"text\" ref={this.inputRef}/\u003e\n //....\n ```\n - Step 3 : ( call the focuse method on this input element )\\\n but first what exetly does the property hold after a ref is created So, we will:\n ```js\n componentDidMount(){\n console.log(this.inputRef)\n }\n ```\n after doing this we will get a output like:\\\n Console: Object\u003ecurrent:input...\u003e...\\\n we can see a object has been log in the console If we expand we can see a property called 'current' of type input (because we have refer input in ref) and this 'current' property contain the actual DOM noted So, to focus in input element in componentDidMount() we simply call 'focus()' method on the 'current' property\n ```js\n componentDidMount(){\n this.inputRef.current.focus()\n //console.log(this.inputRef)\n }\n ```\n - So, 2nd use of ref is to fetch the input value \n ```js\n //inside render\n \u003cinput type=\"text\" ref={this.inputRef}/\u003e\n \u003cbutton onClick={this.ifetch}\u003eClick\u003c/button\u003e\n //...\n ```\n Lets create ifetch function\n ```js\n ifetch = () =\u003e {\n alert(this.inputRef.current.value)\n }\n ```\n we are accessing the value property of the input DOM note as a current property\n * React has a 2nd way to set refs which is called 'CallBack ref' (it's Old way)\n - Step 1:\n ```js\n // inside constructor()\n this.cbRef = null\n // Created a property asign a value of null\n this.setCbRef = (element) =\u003e {\n this.cbRef = element\n // created a method asign a DOM element to the Ref\n }\n ``` \n - Step 2:\n ```js\n \u003cinput type=\"text\" ref={rhis.setCbRef}/\u003e \n ```\n - Step 3:\n inside the React callback ref react will call the ref with a DOM element when the component mounts and call it with null when its unmounts\n ```js\n componentDidMount(){\n if(this.cbRef){\n this.cbRef.focus() // we can access directly without using current\n }\n }\n ```\n * ### Refs with class components\n * at the above topic we saw how to add refs to a normal HTML element like input element but its posible to add a refs in class component also\n eg: File1Input.js\n ```js\n //create a class\n //create a constructor\n this.inputRef=React.createRef()\n //create a method\n focusInput(){\n this.inputRef.current.focus()\n }\n //inside return\n \u003cinput type=\"text\" ref={this.inputRef}/\u003e\n ```\n Now we will create a parent component File2FocusInput.js\n ```js\n import YourClassName from './FIle1Input'\n //create a class\n //inside constructor()\n this.componentRef = React.createRef()\n\n clickHandler = () =\u003e{\n this.componentRef.current.focusInput()\n // focusInput() its came from child component\n }\n //inside return\n \u003cYourClassName ref={this.componentRef}\u003e\n \u003cbutton onClick={this.clickHandler}\u003e\n ```\n So, output will be when even i click the button its get focus into the text box\n * ### Forwording refs\n * is a tecnic for automatickly passing a ref through a component to one of their child\n * eg:\\\n Parent Component - FRParentInput.js\n ```js\n //import your child component\n import FRInput from './FRInput'\n import React, { Component } from 'react'\n\n class FRParentInput extends Component{\n constructor(props){\n super(props)\n this.inputRef = React.createRef()\n }\n\n clickMe = ()=\u003e{\n this.inputRef.current.focus()\n }\n\n render(){\n return(\n \u003cFRInput ref={this.inputRef}/\u003e\n \u003cbutton onClick={this.clickMe}\u003e\n )\n }\n }\n ```\n and in child component - FRInput.js\n ```js\n import React from 'react'\n const FRInput = React.frowardRef((props,refrence)=\u003e{\n return \u003cinput type=\"text\" ref={refrence}/\u003e\n })\n * ## Portals\n * Provide a way to render children into s DOM note exist outside the DOM higher key of parent component\n * eg: So far we have only 1 DOM element node in HTML that we ware mounting in our react application\n * if we see ```index.html``` we will get to see ```\u003cdiv id='root'\u003e...\u003c/div\u003e```\n * and in ```index.js``` we get to see:\\\n ```js\n ReactDOM.render(\u003cApp/\u003e,document.getElementById('root'));\n ```\n * portal provide the ability to break out of the DOM tree\n * For creating our own lets create and understand by an example:\n * (Create a DOM note which fall outside the root element)\n - Step 1: (In ```index.html``` write)\n ```\u003cdiv id=\"MyCustomPortal\"\u003e...\u003c/div\u003e```\n - Step 2: (lets create a new component) MyPortal.js\n ```js\n import React from 'react'\n import ReactDOM from 'react-dom'\n\n function MyPortal(){\n return ReactDOM.createPortal(\n \u003cp\u003eWoow i am outside 'root'\u003c/p\u003e,\n document.getElementById('MyCustomPortal')\n )\n }\n\n export default MYPortal\n ```\n - Step 3: (Add in main File which is App.js)\n * ReactDOM.createPortal(TAKES 2 PARAMETER)\n - 1. JSX which you want to render\n - 2. DOM note to mount the element\n * ## ERROR Boundary\n * Error handling phase methods\n - static getDerivedStateFromError(error)\n - componentDidCatch(error,info)\n * When there is a app crash it kept into a broken state (it's unmount component tree)\n * we can catch a error in component tree and display a fall back UI\n * a class component that implements either 1 or both of the lifecycle methods\n - getDerivedStateFromError or componentDidCatch becomes an error boundary\n * the static method getDerivedStateFromError method is used to render a fallback UI after an error is thrown and the componentDidCatch method is used to log error informantion \n * example: MyBFF.js\n ```js\n import React from 'react'\n function MyBFF({BFFName}){\n if(BFFName!='spoorthi'){\n throw new Error(`No!, ${BFFName} is not authors BFF`)\n }\n return(\n \u003cp\u003eYea {BFFName} is Authors BFF\u003c/p\u003e\n )\n }\n //...\n ```\n and in main file (App.js)\n ```js\n \u003cMyBFF BFFName=\"spoorthi\"/\u003e\n \u003cMyBFF BFFName=\"nandan\"/\u003e\n ```\n But the whole UI crash \n * we dont want this if a perticular component throus error only that component should back into UI and other component should not be effected\n * so, MyERRORBoundary.js\n ```js\n import React,{Component} from 'react'\n\n class MyERRORBoundary extends Component{\n constructor(props){\n super(props)\n this.state={\n hasError:false\n }\n }\n\n static getDerivedStateFromError(error){\n return{\n hasError:true\n }\n }\n\n componentDidCatch(error,info){\n console.log(error)\n console.log(info)\n }\n\n render(){\n if(this.state.hasError){\n return \u003cp\u003eOoops! Something went wrong\u003c/p\u003e\n }\n return this.props.children\n }\n }\n\n export default MyERRORBoundary;\n ```\n in MyBFF.js\n ```js\n import React from 'react'\n\n function MyBFF({BFFName}){\n if(BFFName!=='spoorthi'){\n throw new Error(`No!, ${BFFName} is not authors BFF`)\n }\n return(\n \u003cp\u003eYea {BFFName} is Authors BFF\u003c/p\u003e\n )\n }\n\n export default MyBFF;\n ```\n in App.js\n ```js\n \u003cMyERRORBoundary\u003e\n \u003cMyBFF BFFName=\"spoorthi\"/\u003e\n \u003c/MyERRORBoundary\u003e\n \u003cMyERRORBoundary\u003e\n \u003cMyBFF BFFName=\"nandan\"/\u003e\n \u003c/MyERRORBoundary\u003e\n ```\n - output will be : \\\n Yea spoorthi is Authors BFF \\\n No!, nandan is not authors BFF\n \u003e you will still see error because product is in developing stage so by clicking in ```x``` at corner you can see the actual output\n * ### Summary\n * error boundaries are react component that catch js error in their child component tree, log thoes error and display a fall-back UI\n * A class component becomes an error boundary by defining either both of getDerivedStateFromError and componentDidCatch life cycle method\n * the placement of the error boundary also metters as it controls it entire app should have the fall-back UI or just the component causing the problem\n * provide a way to gracetully handle error in application code \n * ## Higher Order Components - HOC\n * let me start with a counter example...\\\n eg: ClickCount.js\n ```js\n class ClickCounter extends Component{\n constructor(props){\n super(props)\n this.state = {count:0}\n }\n incrementCount = () =\u003e {\n this.setState(prevState =\u003e{\n return {count:prevState.count+1}\n })\n }\n render(){\n const {count} = this.state\n return \u003cbutton onClick={this.incrementCount}\u003eClick {count} times\u003c/button\u003e\n }\n }\n ```\n this was no. of click but if i include the count no. hover then we need to dublicate the whole code and add ```\u003ch3 onMouseOver={this.incrementCount}\u003eYou have hover from me {count} times\u003c/h3\u003e``` \n * we are dublicating code not reusing the function means in click counter and hover counter we are just rewrite the same function\n * Component Tree \n \u003ccode\u003e\n Parent -\u003e clickCounter (both are shareing same parents)\n -\u003e howerCounter (state is taken from parent and props are same for both)\n \u003c/code\u003e\n * lift counter logic to parents and pass props but if:\n \u003ccode\u003e\n parent -\u003e clickCounter\n -\u003e component A \u003e component B \u003e howerCounter\n (then its create problem) \n \u003c/code\u003e\n * ### what is HOC\n * a pattern where a function takes a component as an argument and returns a new component\n * \n ```js\n const NewComponent = higherOrderComponent(orginal component)\n /* NewComponent we also say as : enhanced component\n ```\n \u003e Advantage : all the states will different for differen component\n * eg: firstCounter.js\n ```js\n import React,{Component} from 'react'\n // MyHOCCounter is our new component \n // WrappedComponent is our orginal component (props)\n const MyHOCCounter = WrappedComponent=\u003e{\n class MyHOCCounter extends Component{\n constructor(props){\n super(props)\n this.state = {count:0}\n }\n incrementCount = () =\u003e {\n this.setState(prevState =\u003e{\n return {count:prevState.count+1}\n })\n }\n render(){\n return(\n \u003cWrappedComponent \n count = {this.state.count} \n incrementCount = {this.incrementCount}\n /\u003e\n )\n }\n }\n return MyHOCCounter\n }\n export default MyHOCCounter;\n ```\n Now we will use to track No. of click\\\n HOCClick.js\n ```js\n import React, {Component} from 'react'\n import MyHOCCounter from './firstCounter'\n\n class HOCClickCounter extends Component{\n render(){\n const {count,incrementCount} = this.props\n return \u003cbutton onClick={incrementCount}\u003eYou have clicked {count} times\u003c/button\u003e\n }\n }\n export default MyHOCCounter(HOCClickCounter);\n ```\n Now we will use to track No. of hover with the same counter (MyHOCCounter)\\\n HOCHover.js\n ```js\n import React, {Component} from 'react'\n import MyHOCCounter from './firstCounter'\n\n class HOCHoverCounter extends Component{\n render(){\n const {count,incrementCount} = this.props\n return \u003cp onMouseOver={incrementCount}\u003eYou have clicked {count} times\u003c/p\u003e\n }\n }\n export default MyHOCCounter(HOCHoverCounter);\n ```\n * the props is passed to the HOC but not to the component that rapped \\\n So, to fixed this in HOC\n ```\n \u003cWrappedComponent ...\u003e\n {...this.props}\n ...\n ```\n by this it says other remaning props just passout \n * if you dont want to use ```...this.props``` then\\\n Counter.js\n ```\n \u003cbutton onClick={incrementCount}\u003e...{this.props.name}...\n ```\n and in app.js\n ```\u003cCounter name=\"sj\"\u003e```\n - then it is not going to show any thing 'sj' So, by using {...this.props}\n * passing parrameter in HOC function\n ```\n const withCounter(WrappedComponent,NoOfComp..)=\u003e{\n ...\n }\n ```\n * ## Render Props\n * the term \"render props\" refers to a tecnique for sharing code between react component using a props whoes value is a function\n * lets understand by example...\n - Example 1: passing a function in the tag\n ```js\n \u003cUser name={()=\u003e'Sukarna'}/\u003e\n ```\n and to use that function \n ```js\n //... \n return(\n \u003cdiv\u003e{this.props.name}\u003c/div\u003e\n )\n ```\n - Example 2: if we need parameter to the function in the props based on parameter changes the output then,\n ```js\n \u003cIsUserName name={(nameIs)=\u003enameIs?'Sukarna':'Gest'}/\u003e\n ``` \n and the in function:\n ```js\n //....\n class IsUserName extends Component{\n render(){\n return(\n \u003cdiv\u003e{this.props.name(true)}\u003c/div\u003e\n )\n }\n }\n //....\n ```\n - Example 3: we will make a counter...\\\n renderFile.js\n ```js\n //...\n class CounterRenderProps extends Component{\n constructor(props){\n super(props)\n this.state={\n count:0\n }\n }\n incrementCount = () =\u003e{\n this.setState(prevState=\u003e{\n return{count:prevState.count+1}\n })\n }\n render(){\n return(\n \u003cdiv\u003e\n {this.props.render(this.state.count,this.incrementCount)}\n \u003c/div\u003e\n )\n }\n }\n //...\n ```\n parent where it will be in use...\n ```js\n \u003cCounterRenderProps render={(count,counter)=\u003e(\n \u003cRunRenderPropCount count = {count} counter = {counter}/\u003e)}/\u003e\n ```\n to handel the props another file...\n ```js\n //...\n class RunRenderPropCount extends Component{\n render(){\n const {count,counter} = this.props\n return(\n \u003cdiv\u003e\n \u003cp\u003erender counter from props\u003c/p\u003e\n \u003cbutton onClick={counter}\u003eYou have clicked - {count}\u003c/button\u003e\n \u003c/div\u003e\n )\n }\n }\n //...\n ```\n - if you want to passas a children u can by just\n ```\n {this.props.childern(...)}\n ```\n and the place you want to use \n ```\n \u003cMyrenderProps\u003e\n {...your function...}\n \u003c/MyrenderProps\u003e\n ```\n * ## Context\n * context propvide a way to pass data through the component tree without having to pass the props down manually at every level\n\n \u003ccode\u003e\n App -\u003e CA1\n -\u003e CA2 \u003e CB2 \u003e CC2\n -\u003e CA3 \u003e CB3 \u003e CC3 \u003e CD3\n \u003c/code\u003e\n\n I need a props should go from app to CD3 directly so then context comes\n * we can do this in 3 step:\n - Step1: Create context\n ```js\n const UserContext = React.createContext()\n ```\n now the ```createContext``` method comes with a provider and a consumer react component to grab that ...\n ```js\n const UserProvider = UserContext.Provider\n const UserConsumer = UserContext.Consumer\n ```\n to use in other component you need to export it\n ```export {UserProvider,UserConsumer}```\n - Step2: Provide a context value \\ \n at the top level where the props is going to pass to other nested component tree\n ```js\n import {UserProvider} from 'filePath'\n \u003cUserProvider value=\"Sukarna\"\u003e\n // pass to component tree\n \u003cCA3/\u003e\n \u003c/UserProvider\u003e\n ```\n - Step3: Consume the context value \\\n now the component which required the pass on value\n ```js\n //this is CD3\n import {UserConsumer} from 'filePath'\n //...\n \u003cUserConsumer\u003e\n {name=\u003e{\n return \u003cp\u003e{name}\u003c/p\u003e\n }}\n \u003c/UserConsumer\u003e\n ```\n our username is the pass on value which we passed in ```\u003cUserProvider\u003e```\n * We can set a defalt value to our context\n - Step1: while creating the context its pass as a argument to create context method\n ```js\n const UserContext = React.createContext('Jana')\n ```\n if you dont use ```\u003cUserProvider\u003e``` ths \"Jana\" will be defalt will pass to ```\u003cUserConsumer\u003e```\n\n * ### Context type property \n at last example we see that how to use UserConsumer to consume the context value, But there is a other way : \\\n \n - Use context type property on a class, for that we need to pass ```UserContext``` only\n ```js\n export default UserContext\n ```\n Now the Component which need to consume in the component tree there will ```CLASS_NAME.contextType = UserContext``` bilow class and to see the context data inside class render ```{this.context}```...\n\n - if your application supports public class fild sintax we can replace ```CLASS_NAME.contextType = UserContext``` by typing inside the render() ```static contextType = UserContext```\n\n \u003e Its has a limitation that its only work with class component\n\n * ### consume multiple context\n\n * Example \n\n ```js\n function content(){\n render(\n \u003cThemeContext.Consume\u003e\n {theme=\u003e(\n \u003cUserContext.Consume\u003e\n {user=\u003e(\n \u003cProfilePage user={user} theme={theme}/\u003e\n )\n }\n \u003c/UserContext.Consume\u003e\n )}\n \u003c/ThemeContext.Consume\u003e\n )\n }\n ```\n\n * ## Mini Project to understand HTTP GET \u0026 POST \n \u003e we will use axios So, to install axios go to the dir where your porject is and then if you are using npm then in shel/terminal type: ```npm install axios -- save``` \n \n * see the code once \n - For Posting [CODE](demo/src/components/HTTPPostData.js)\n - For Fetching [CODE](demo/src/components/HTTPGetFetch.js)\n\n# About Hooks\n* ## What is Hooks?\n Hooks are a new feature addition in \u003cb\u003eReact Version 16.8.0\u003c/b\u003e which will allow you to use React feature without having to write a class, eg: State of the component \n\n\u003e Hooks don't work inside classes...\n\n* ## Why Hooks?\n - Reason1: \n * understand how \"this\" keywords works in JS\n * remember to bind event handler in class components\n * classes don't midify very well \u0026 makes hot reloading very unreliable \n With hooks we dont use class so all this porblem are solve \n - Reason2:\n * there is no periticular way to reuse state full component logic \n * HOC \u0026 render props patterns do address this problem \n * makes the code harder to follow\n * there is need a to shere state full logic in a better way\n - Resion3:\n * create components for complex scenarios such as data fetching \u0026 subscribing to events\n * related code is not organized in one place \\ \n example: data fetching - in componentDidMount \u0026 componentDidUpdate\n example: event listeners - in componentDidMount \u0026 componentWillUnmount\n * Because of this statefull logic - cannot break components into smaller onces\n - Note worthy points:\n 1. it will work only in React verison 16.8 or higher\n 2. Hooks don't contain any breaking changes \u0026 the release is 100% backword compatible\n 3. Classes won't be removed from react there are still there \n 4. you can't use hooks inside of a class Component \n 5. now hooks provide a more direct API to the react concepts you already know\n* ## Rules of hooks\n * only call hooks on the top level\n * don't call hooks inside loops, conditions or nested function \n * only call hooks from react function \n * call them from with in react functional component and not just any regular JS function \n\n* ## useState\n * if we started writing a function component and rap into a situation where you needed to app state then you have to convert the component to class component...\n * that is because state only be used in class component we will change that opinion by using state hooks by which we can use state on functional component \n * Example 1: lets creat a counter \n - normally we use without hooks was : Create class \u003e create state \u003e create method \u003e in render add button with onClick event \n - but now using Hooks:\\\n (Hooks accept a arument which is the initial value of the state property and returns the current value of the state and a method that is capable of updating that state property)\n ```js\n import React,{useState} from 'react'\n\n function CounterOne(){\n const [count,setCount] = useState(0)\n return(\n \u003cdiv\u003e\n \u003cbutton onClick={()=\u003esetCount(count+1)}\u003eYour Count is {count}\u003c/button\u003e\n \u003c/div\u003e\n )\n }\n\n export default CounterOne;\n ``` \n * ## useState hooks with previous state\n example: we will use count method but with increment, dicrement, reset\n * without taking previous state and doing task is unsafe (its not the right way to change state value )\n ```js\n function CounterTwo(){\n const initialValue = 0;\n const [count,setCount] = useState(initialValue);\n const incrementFive = () =\u003e {\n for(let i = 0; i \u003c 6; i++){\n setCount(prevState=\u003eprevState + 1)\n }\n }\n /* Another way to increment 5 is \n const incrementFive = () =\u003e {setCount(prevState=\u003eprevState.count + 5)}\n */\n return(\n \u003cdiv\u003e\n \u003cp\u003ePresent Value: {count}\u003c/p\u003e\n \u003cbutton onClick={()=\u003esetCount(initialValue)}\u003eReset\u003c/button\u003e\n \u003cbutton onClick={()=\u003esetCount(prevState=\u003eprevState+1)}\u003eIncrement\u003c/button\u003e\n \u003cbutton onClick={()=\u003esetCount(prevState=\u003eprevState-1)}\u003eDicrement\u003c/button\u003e\n \u003cbutton onClick={incrementFive}\u003eIncrement 5\u003c/button\u003e\n \u003c/div\u003e\n )\n }\n ```\n * ## useState hooks with object\n lets understand by a demo\n ```js\n function CounterObject(){\n const [UserData,setUserdata] = useState(\n {firstName:\"\",lastName:\"\",age:18})\n /* \n by defalt firstName and lastName... is '' but when we start writing\n any one of them the other will vanish this is because useState doesnot\n automatically mearge and updates the object So, we use spread operater\n '...UserData,' by this we are spreading the pervious state and overwriting \n the previous state with the new onces...\n */\n return(\n \u003cdiv\u003e\n \u003cinput type=\"text\" value={UserData.firstName} onChange={e=\u003esetUserdata({...UserData,firstName:e.target.value})}/\u003e\n \u003cinput type=\"text\" value={UserData.lastName} onChange={e=\u003esetUserdata({...UserData,lastName:e.target.value})}/\u003e\n \u003cinput type=\"number\" value={UserData.age} onChange={e=\u003esetUserdata({...UserData,age:e.target.value})}/\u003e\n \u003cp\u003eYour inserted data is :\u003c/p\u003e\n \u003cul\u003e\n \u003cli\u003eYour First Name : {UserData.firstName}\u003c/li\u003e\n \u003cli\u003eYour Last Name : {UserData.lastName}\u003c/li\u003e\n \u003cli\u003eYour Age : {UserData.age}\u003c/li\u003e\n \u003c/ul\u003e\n \u003c/div\u003e\n )\n }\n ```\n \u003e So, the setter function provided by the useState hooks doesnot automatically mearge and update object we have to do that manually\n\n if you want to see the JSON state then ```{JSON.stringfy(data)}```\n\n * ## useState hooks with array\n example: how to use hooks if state value is array we will understand by making a simple todo application\n ```js\n function todo(){\n const [item,setItem] = useState([])\n const [inputData,setInputData] = useState(\"\")\n const addItem = (e) =\u003e {\n e.preventDefault()\n setItem([...item,{data:inputData,id:item.length}])\n }\n return(\n \u003cdiv\u003e\n \u003cform onSubmit={addItem}\u003e\n \u003ctextarea value={inputData} onChange={e=\u003e{setInputData(e.target.value)}}/\u003e\n \u003cbutton type=\"submit\"\u003eAdd ToDo\u003c/button\u003e\n \u003c/form\u003e\n \u003cp\u003eYour ToDo\u003c/p\u003e\n \u003cul\u003e\n {item.map(value=\u003e(\u003cli id={value.id}\u003e{value.data}\u003c/li\u003e))}\n \u003c/ul\u003e\n \u003c/div\u003e\n )\n }\n ```\n * ### Summary - useState()\n - the useState hook lets you add state to function component\n - in classes the state is an object\n - with the useState hooks, the state dosenot have to be an object\n - the useState hook returns an array with 2 elements\n - the first element is the current value of the state, and the second element is a state setter function\n - new state value depends on the previous state value? you can pass a function to the setter function\n - when dealing with object/array always make sure to spread your state variable and then call the setter function\n\n* ## useEffect\n * if we work with class component we have to some sideEffect components eg: update the DOM, fetching data from end points, setting up subscription or timmers sence the render method is to early to form side effect we use life cycle method\n * - Example 1 : updating the document title to the current counter value\n ```js\n componentDidMount(){\n // this will render only onces in component lifecycle\n document.title=`Clicked ${this.state.count}` //A1\n }\n componentDidUpdate(){\n // to update we stuffs when ever their will be a change\n document.title=`Clicked ${this.state.count}` //A2\n }\n ```\n - Example 2 : timmer, we well log hello every 5 sec. well create tis timmer in the class component will be removed from DOM\n ```js\n componentDidMount(){\n // this will render only onces in component lifecycle\n this.interval = setInterval(this.tick,1000) //B1\n }\n componentDidUpdate(){\n // to update we stuffs when ever their will be a change\n clearInterval(this.interval) //B2\n }\n ```\n - but when we see the same A1 and A2 code are repeated and they are together or split appart and the code reated to the timmer the code in B1 and B2 are related but kept in different code blocks (different lifecycle) and the A1 and B1 are completly unreated but still they are kept together\n * So, to solve this we have \u003cb\u003euseEffect\u003c/b\u003e hooks\n 1. the effect hook lets you perform side effects in function component\n 2. it is a close replacement for componentDidMount, componentDidUpdate \u0026 componentWillUnmount\n \n * ### useEffect after render\n * for this example we will memic componentDidMount \u0026 componentDidUpdate but in function component using useEffect\n * we will make a code to counter and on every click will update the title\n - without useEffect hooks it was like\n 1. create class\n 2. create state\n 3. create componentDidMount() for initial value\n 4. create componentDidUpdate(prevProps,prevState)\n 5. render\n 6. onclick increment the state variable\n - with useEffect\n ```js\n function CounterOneEffect(){\n const [count,setCount] = useState(0)\n // we pass in a paremeter which is a function\n // which will get executed after every render of the component\n useEffect(()=\u003e{\n document.title = `Clicked ${count}`\n })\n return(\n \u003cdiv\u003e\n \u003cbutton onClick={()=\u003esetCount(count+1)}\u003eIncrement title\u003c/button\u003e\n \u003c/div\u003e\n )\n }\n ```\n \u003e useEffect runs after every render of the component \n \n * ### useEffect conditionally run effects\n - as we have seen that useEffect runs after every render of the component but if we want to run on some condition not every time then\n - it we see that last example without hooks and all one more we will add a input field the when ever we click button its render but its re-render in typing also which we dont want So, we just want to re-render whenever the button is clicked not typing in input field then \\\n then without using Hooks\n ```js\n componentDidUpdate(prevProps,prevState){\n if(prevState.count !== this.state.count){\n document.title = `Clicked ${count}`\n console.log('Document title has updated')\n }\n }\n ```\n - but now using hooks\n ```js\n import React,{useState,useEffect} from 'react'\n\n function CounterTwoEffect(){\n const [count,setCount] = useState(0)\n const [name,setName] = useState('')\n\n useEffect(()=\u003e{\n document.title = `Clicked ${count}`\n },[count])\n\n return(\n \u003cdiv\u003e\n \u003cinput type=\"text\" value={name} onChange={(e)=\u003esetName(e.target.value)}/\u003e\n \u003cbutton onClick={()=\u003esetCount(count+1)}\u003eIncrement title\u003c/button\u003e\n \u003c/div\u003e\n )\n }\n ```\n we will pass a 2nd parameter in useEffect which is an array and it we pass something in that array then it will compair the old value and new value and rerender\n\n * ### Run effect only onces \n - means we will mimic ```componentDidMount()```, So we will pass 2nd parameter as a empty [] in useEffect\n - example:\n ```js\n function MouseThrEffect(){\n const [x,setX] = useState(0)\n const [y,setY] = useState(0)\n\n const logMousePosition = e =\u003e{\n console.log(\"Mouse Event\")\n setX(e.clientX)\n setY(e.clientY)\n }\n\n useEffect(()=\u003e{\n console.log(\"MouseThrEffect is called\")\n window.addEventListener('mousemove',logMousePosition)\n },[])// because of this [] it will run only onces\n\n return(\n \u003cdiv\u003e\n \u003cp\u003eMouse positon in this screen - X:{x},Y:{y}\u003c/p\u003e\n \u003c/div\u003e\n )\n }\n ```\n * ### useEffect with cleanup\n - we will memic ```componentWillUnmount()```, we 'return' a function which will run when component unmounts (whenever we 'return' its a cleanup function) \n - Example: if i want to stop tracking the mouse\n ```js\n function EffectMouse(){\n const [x,setX] = useState(0)\n const [y,setY] = useState(0)\n\n const logMousePosition = e =\u003e{\n console.log(\"Mouse Event\")\n setX(e.clientX)\n setY(e.clientY)\n }\n\n useEffect(()=\u003e{\n console.log(\"MouseFouEffect is called\")\n window.addEventListener('mousemove',logMousePosition)\n return ()=\u003e{\n console.log(\"MouseFouEffect has unmount\")\n window.removeEventListener('mousemove',logMousePosition)\n }\n },[])\n\n return(\n \u003cdiv\u003e\n \u003cp\u003eMouse positon in this screen - X:{x},Y:{y}\u003c/p\u003e\n \u003c/div\u003e\n )\n }\n\n export function MouseFouEffect(){\n const [display,setDisplay] = useState(true)\n return(\n \u003cdiv\u003e\n \u003cbutton onClick={()=\u003esetDisplay(!display)}\u003eUnmount\u003c/button\u003e\n {display ? \u003cEffectMouse/\u003e : \u003cp\u003eMouse Event has Unmount\u003c/p\u003e}\n \u003c/div\u003e\n )\n }\n ```\n * ### useEffect with incorrect dependency\n - we will take the mistake So, not required but 1 way has 2 tricks to do the same job\n - example: keep on counting every 1sec.\n ```js\n const tick() =\u003e {setCount(count+1)}\n useEffect(()=\u003e{\n const interval = setInterval(tick,1000)\n return()=\u003e{\n cleanInterval(interval)\n }\n },[count])\n ```\n or\n ```js\n const tick() =\u003e {setCount(pervState=\u003eprevState+1)}\n useEffect(()=\u003e{\n const interval = setInterval(tick,1000)\n return()=\u003e{\n cleanInterval(interval)\n }\n },[])\n ```\n - to run multiple useEffect to run then make sure you suprate them out thather then having a code in single useEffect\n\n * ### lets make a mini project to Fetch data with useEffect\n 1. take the data fetch it and stop (render onces) [FetchOneuseEffect.js](demo/src/hookComponents/FetchOneuseEffect.js)\n 2. we will fetch individual post by passing in the post id get request [FetchTwouseEffect.js](demo/src/hookComponents/FetchTwouseEffect.js)\n 3. now we will add a button and using that button we will take the input value and then fetch data onClick [FetchThruseEffect.js](demo/src/hookComponents/FetchThruseEffect.js)\n \n* ## useContext hooks\n\n * as we know \"context\" provide a way to pass data through the component tree without having to pass props down manually at every level\n * we used to do before using hooks, we use to create:\n ```js\n export const UserContext = React.createContext()\n ```\n and when we will start passing\n ```js\n \u003cUserContext.Provider value={passYourValue}\u003e\n \u003cYour_Component_Tree/\u003e\n \u003c/UserContext.Provider\u003e\n ```\n and where we want to consume\n ```js\n \u003cUserContext.Consumer\u003e\n {user=\u003e{\u003cp\u003e{user}\u003c/p\u003e}}\n \u003c/UserContext.Consumer\u003e\n ```\n * if multiple context\n to send:\n ```js\n \u003cUserContext.Provider value={passYourValue}\u003e\n \u003cUser2Context.Provider value={passYourValue}\u003e\n \u003cYour_Component_Tree/\u003e\n \u003c/User2Context.Provider\u003e\n \u003c/UserContext.Provider\u003e\n ```\n to fetch:\n ```js\n \u003cUserContext.Consumer\u003e\n {age=\u003e{\n return(\n \u003cUser2Context.Consumer\u003e\n {user=\u003e{\u003cp\u003e{user},{age}\u003c/p\u003e}}\n \u003c/User2Context.Consumer\u003e\n )\n }}\n \u003c/UserContext.Consumer\u003e\n ```\n * now using hook ```useContext()```\n - there are 3 different step to consume value on other component tree\n - Step 1 : \n ```import {useContext} from 'react'```\n - Step 2 : \n ```js\n //import The Nessary Context\n import {UserName,UserAge} from 'From_Context_File'\n ```\n the place you are importing from should have\n ```js\n export const UserName = React.createContext()\n export const UserAge = React.createContext()\n ```\n - Step 3 : \n * call the useContext function by passing in a contexts as its argument and its return the context value\n * inside a function()\n ```js\n const Data1 = useContext(UserName)\n const Data2 = useContext(UserAge)\n ```\n and just use that variable where you want to ...\n * to create a context is normal provider\n ```js\n export const userData = React.createContext()\n return(\n \u003cuserData.Provider value={YOUR_VALUE}\u003e\n \u003cComponent_Tree/\u003e\n \u003c/userData.Provider\u003e\n )\n ```\n and the place you want to consume\n ```js\n const data = useContext(userData)\n ```\n and use where ever you want\n\n* ## useReducer\n * useReducer is a hook that is used for state management\n * it is an alternative to useState\n* ### what's the different?\n - useState is built using useReducer\n * useReducer hook is related to reducers\n* what is reduce?\n - \u003e its in vanala JS / a normal JS So, we need to understand reducers to understand the hooks\n - the ```reduce()``` method executes a reducer function (that you provide) on each element of the array, resulting in a single output value\n * reduce method takes 2 parameters, 1st parameter is the reducer function , 2nd parameter is an initial value that the reducer function accept again 2 parameter which reduce the value to singal and returns that value \\ \n example:\n ```js\n const array1 = [1,2,3,4];\n const reducer = (accumulation,currentvalue) =\u003e accumulation + currentvalue;\n // 1 + 2 + 3 + 4\n colsole.log(array1.reduce(reducer));\n // Output : 10\n // 5 + 1 + 2 + 3 + 4\n colsole.log(array1.reduce(reducer,5));\n // Output : 15\n ```\n * \n \u003ctable\u003e\n \u003ctr\u003e\n \u003cth\u003eReduce in JS\u003c/th\u003e\n \u003cth\u003euseRucer Hooks\u003c/th\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003e1. array.reduce(reducer,initialValue)\u003c/td\u003e\n \u003ctd\u003e1. useReducer(reducer,initialState)\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003e2. singalValue = reducer(accumulator,itemValue)\u003c/td\u003e\n \u003ctd\u003e2. newState = reducer(current,action)\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003e3. Retuce method and returns a singal value\u003c/td\u003e\n \u003ctd\u003e3. useReducer returns a pair of value [newState,dispatch]\u003c/td\u003e\n \u003c/tr\u003e\n \u003c/table\u003e\n* ### Summary\n * useReducer is a hook that is used for state management in react\n * useReducer is related to reducer function\n * useReducer(reducer,initialState)\n - reducer(currentState,action)\n\n* useReducer (simple state \u0026 action)\n - we will create a counter with increment, decrement, reset button\n ```js\n import React,{useReducer} from 'react'\n const initialState = 0\n const reducer=(state,action) =\u003e{\n switch(action){\n case 'increment':\n return state + 1 \n case 'dicrement':\n return state - 1\n case 'reset':\n return initialState\n default:\n return state\n }\n }\n function SimpleUseReducer(){\n const [count,dispatch] = useReducer(reducer,initialState)\n return(\n \u003cdiv\u003e\n \u003cp\u003euseReducer hooks\u003c/p\u003e\n \u003cp\u003e{count}\u003c/p\u003e\n \u003cbutton onClick={()=\u003e{dispatch('increment')}}\u003eincrement\u003c/button\u003e\n \u003cbutton onClick={()=\u003e{dispatch('dicrement')}}\u003edicrement\u003c/button\u003e\n \u003cbutton onClick={()=\u003e{dispatch('reset')}}\u003ereset\u003c/button\u003e\n \u003c/div\u003e\n )\n } \n ```\n* ### useReducer (complex state \u0026 action)\n - Example 1 : Its a object type\n ```js\n const initialState2 = {\n firstCounter:0\n }\n const reducer2=(state,action) =\u003e{\n switch(action.type){\n case 'increment':\n return {firstCounter:state.firstCounter + 1}\n case 'dicrement':\n return {firstCounter:state.firstCounter - 1}\n case 'reset':\n return {firstCounter:initialState}\n default:\n return {state}\n }\n }\n function ComplexUseReducer(){\n const [count,dispatch] = useReducer(reducer2,initialState2)\n return(\n \u003cdiv\u003e\n \u003cp\u003euseReducer hooks complex\u003c/p\u003e\n \u003cp\u003e{count.firstCounter}\u003c/p\u003e\n \u003cbutton onClick={()=\u003e{dispatch({type:'increment'})}}\u003eincrement\u003c/button\u003e\n \u003cbutton onClick={()=\u003e{dispatch({type:'dicrement'})}}\u003edicrement\u003c/button\u003e\n \u003cbutton onClick={()=\u003e{dispatch({type:'reset'})}}\u003ereset\u003c/button\u003e\n \u003c/div\u003e\n )\n }\n ```\n - Example 2: I need to increment upto 5 snece we are doing in object so,...\n ```js\n const initialState3 = {\n firstCounter:0\n }\n const reducer3=(state,action) =\u003e{\n switch(action.type){\n case 'increment':\n return {firstCounter:state.firstCounter + action.value}\n case 'dicrement':\n return {firstCounter:state.firstCounter - action.value}\n case 'reset':\n return {firstCounter:initialState}\n default:\n return {state}\n }\n }\n export function ComplexUseReducerTwo(){\n const [count,dispatch] = useReducer(reducer3,initialState3)\n return(\n \u003cdiv\u003e\n \u003cp\u003euseReducer hooks complex\u003c/p\u003e\n \u003cp\u003e{count.firstCounter}\u003c/p\u003e\n \u003cbutton onClick={()=\u003e{dispatch({type:'increment',value:5})}}\u003eincrement 5\u003c/button\u003e\n \u003cbutton onClick={()=\u003e{dispatch({type:'dicrement',value:10})}}\u003edicrement 10\u003c/button\u003e\n \u003cbutton onClick={()=\u003e{dispatch({type:'reset'})}}\u003ereset\u003c/button\u003e\n \u003c/div\u003e\n )\n }\n ``` \n - Example 3: (if there are multiple object then spread operator should must be used to rewrite otherwise you will over write everything fresh...)\n ```js\n const initialState3 = {\n firstCounter:0,\n secondCount:10\n }\n const reducer3=(state,action) =\u003e{\n switch(action.type){\n case 'increment':\n return {...state,firstCounter:state.firstCounter + action.value}\n case 'dicrement':\n return {...state,firstCounter:state.firstCounter - action.value}\n case 'increment2nd':\n return {...state,secondCounter:state.secondCounter+ action.value}\n case 'dicrement2nd':\n return {...state,secondCounter:state.secondCounter - action.value}\n case 'reset':\n return {firstCounter:initialState}\n default:\n return {state}\n }\n }\n //.....\n ``` \n * we can maintain both the state and action as object\n - action as object we can pass more data\n - state as object we can keep track all multiple start variable\n* ### Multiple useReducer \n * if we need 2 counter with the exact same state transitions there is much simplers alternative by using multiple useReducer, Example:\n ```js\n const initialState = 0\n const reducer=(state,action) =\u003e{\n switch(action){\n case 'increment':\n return state + 1 \n case 'dicrement':\n return state - 1\n case 'reset':\n return initialState\n default:\n return state\n }\n }\n export function SimpleUseReducer(){\n const [count1,dispatch1] = useReducer(reducer,initialState)\n const [count2,dispatch2] = useReducer(reducer,initialState)\n return(\n \u003cdiv\u003e\n \u003cp\u003euseReducer hooks simple\u003c/p\u003e\n \u003cp\u003e{count1} and {count2}\u003c/p\u003e\n \u003cbutton onClick={()=\u003e{dispatch1('increment')}}\u003eincrement 1\u003c/button\u003e\n \u003cbutton onClick={()=\u003e{dispatch1('dicrement')}}\u003edicrement 1\u003c/button\u003e\n \u003cbutton onClick={()=\u003e{dispatch1('reset')}}\u003ereset 1\u003c/button\u003e\n // see we can use same reducer for different part\n \u003cbutton onClick={()=\u003e{dispatch2('increment')}}\u003eincrement 2\u003c/button\u003e\n \u003cbutton onClick={()=\u003e{dispatch2('dicrement')}}\u003edicrement 2\u003c/button\u003e\n \u003cbutton onClick={()=\u003e{dispatch2('reset')}}\u003ereset 2\u003c/button\u003e\n \u003c/div\u003e\n )\n }\n ```\n* ### useReducer with useContext\n - Step 1: Create a whole reducer\n - Step 2: Create a context ```export const MyContext = React.createContext()```\n - Step 3: We will pass count and our dispatch as a value in provider\n ```js\n \u003cMyContext.Provider value={\n {Countstate:count,\n Countdispatch:dispatch}\n }\u003e\n //...\n ```\n - Step 4: Now where we want to use we will use these\n ```js\n const Counter = useContext(MyCounter)\n return(\n \u003cdiv\u003e\n \u003cp\u003e{Counter.Countstate}\u003c/p\u003e\n \u003cbutton onClick={()=\u003eCounter.Countdispatch()}\u003e\n \u003c/div\u003e\n )\n ```\n\n* ### useState vs useReducer\n\u003ctable\u003e\n \u003ctr\u003e\n \u003cth\u003eSinario\u003c/th\u003e\n \u003cth\u003euseState\u003c/th\u003e\n \u003cth\u003euseReducer\u003c/th\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003eType of state\u003c/td\u003e\n \u003ctd\u003eNumber,string,boolen\u003c/td\u003e\n \u003ctd\u003eobject,array\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003enumber of state transition\u003c/td\u003e\n \u003ctd\u003eone or 2\u003c/td\u003e\n \u003ctd\u003e2 or more\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003erelated state transition\u003c/td\u003e\n \u003ctd\u003eNo\u003c/td\u003e\n \u003ctd\u003eYes\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003eboolen logic\u003c/td\u003e\n \u003ctd\u003eNo bunnion logic\u003c/td\u003e\n \u003ctd\u003ecomplex bunnion logic\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003elocal Vs global\u003c/td\u003e\n \u003ctd\u003elocal\u003c/td\u003e\n \u003ctd\u003eglobal\u003c/td\u003e\n \u003c/tr\u003e\n\u003c/table\u003e \n\n* ## useCallback\n * useCallback is a hook that will return a memorized version of the callback function that only changes if one of the dependencies has changed\n * it is usefull when passing callback to optimized child components that reply on reference ezuality to prevent unnessary rendering \n * example : \n ```js\n function CallBackHook(){\n const [skill,setskill] = useState(4)\n const [salary,setSalary] = useState(20000)\n const incrementSkill = useCallback(()=\u003e{\n console.log(\"called skill\")\n setskill(skill+1)\n },[skill])\n const incrementSalary = useCallback(()=\u003e{\n console.log(\"called salary\")\n setSalary(salary+1500)\n },[salary])\n return(\n \u003cdiv\u003e\n \u003cbutton onClick={incrementSkill}\u003eSkill Years +\u003c/button\u003e\n \u003cbutton onClick={incrementSalary}\u003eSalary +\u003c/button\u003e\n \u003cp\u003eIf your skill year is :{skill} then you may get : rs{salary} salary\u003c/p\u003e\n \u003c/div\u003e\n )\n }\n //actually its spread bitween different component (this is a parent component)\n ```\n* ## useMemo hook\n * it is also closely related to useCallback hooks which will boost our performence \n * example:\n ```js\n function MemoHook(){\n const [count1,setCount1] = useState(0)\n const [count2,setCount2] = useState(0)\n const Increment1 = () =\u003e{\n setCount1(count1+1)\n }\n const Increment2 = () =\u003e{\n setCount2(count2+1)\n }\n const isEven = useMemo(()=\u003e{\n let i = 0\n while(i\u003c2000000000) i++\n return count1%2 === 0\n },[count1]) // by this we will see the delay in UI \n return(\n \u003cdiv\u003e\n \u003cp\u003eour Memo hook\u003c/p\u003e\n \u003cdiv\u003e\n \u003cbutton onClick={Increment1}\u003ebutton 1\u003c/button\u003e\n \u003cp\u003e{isEven ? 'Even' : 'Odd'}\u003c/p\u003e\n \u003c/div\u003e\n \u003cdiv\u003e\n \u003cbutton onClick={Increment2}\u003ebutton 2\u003c/button\u003e\n \u003c/div\u003e \n \u003c/div\u003e\n ) \n }\n ```\n* ## useRef hook\n - by the name only we can understand that we its use for refrence (Refs make possible to access DOM notes directly without react)\n - Use Case 1 :\n ```js\n function UseCaseOuseRef(){\n const [userIN,setUserIN] = useState(\"\")\n const inputRef = useRef(null)\n useEffect(()=\u003e{\n //focus the input\n inputRef.current.focus()\n },[])\n return(\n \u003cdiv\u003e\n \u003cinput ref={inputRef} type=\"text\" value={userIN} onChange={(e)=\u003e{setUserIN(e.target.value)}}/\u003e\n \u003cp\u003eYou have Typed: {userIN}\u003c/p\u003e\n \u003c/div\u003e\n )\n }\n ```\n - Use Case 2 :\n ```js\n function UseCaseTuseRef(){\n const [timer,setTimer] = useState(0)\n const intervalRef = useRef()\n // it will help to make it global value\n useEffect(()=\u003e{\n intervalRef.current = setInterval(()=\u003e{\n setTimer(prevTime=\u003eprevTime+1)\n },1000)\n return()=\u003e{\n clearInterval(intervalRef.current)\n }\n },[])\n return(\n \u003cdiv\u003e\n \u003cp\u003e{timer}\u003c/p\u003e\n \u003cbutton onClick={()=\u003eclearInterval(intervalRef.current)}\u003eClear Interval\u003c/button\u003e\n \u003c/div\u003e\n )\n }\n ``` \n* ## Custome Hook\n * a costom hook is basically a JS function whose name starts with \"use\"\n * a custom hook can also call other hooks in required\n * why? - share logic like: Alternative to HOCs \u0026 RenderProps\n * lets make our own Hooks, Like Update Title: [CODE](demo/src/hookComponents/customHook.js)\n\n[Move to TOP](#Full-Stack_JS-React)\n\n\u003ch3 align=\"center\"\u003e Thanks You \u003c/h3\u003e \n \nLicense Under : [MIT LICENSE](LICENSE)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsukarnascience%2Freact_learning","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsukarnascience%2Freact_learning","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsukarnascience%2Freact_learning/lists"}