Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/sukarnascience/react_learning
Learning Stage Of Full Stack JavaScript
https://github.com/sukarnascience/react_learning
Last synced: about 2 months ago
JSON representation
Learning Stage Of Full Stack JavaScript
- Host: GitHub
- URL: https://github.com/sukarnascience/react_learning
- Owner: Sukarnascience
- License: mit
- Created: 2021-05-07T06:37:02.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2021-06-25T09:35:12.000Z (over 3 years ago)
- Last Synced: 2023-03-05T09:34:14.820Z (almost 2 years ago)
- Language: JavaScript
- Size: 1.35 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Full-Stack_JS-React
> Learning Stage Of Full Stack JavaScript
You can use this Repository for your learnig perpose also...
## Installing React
* hope you have install NODE.JS
* we can install Globaly or Locally
* we installed globaly
```npm install -g create-react-app```
> in my case i had to use ```sudo npm install -g create-react-app```
* we will install in a project dir.
```create-react-app ```
* Install : React Developer Tools For Chrome extension
* you will get a package.json file in which help to handel all our packages...
* how to Install new things:
> what this will do is... it will install and update our package.json file
```npm install --save```
* now we will work with src dir.
# Documentation
* ## [OLD Version (Billow V16.8.0)](#Documentation)
* ## [With Hooks New Vesrion (Above V16.8.0)](#About-Hooks)
* I want to give credit to a [YouTube Playlist](https://www.youtube.com/watch?v=QFaFIcGhPoM&list=PLC3y8-rFHvwgg3vaYJgHGnModB54rxOk3) created by [Codevolution](https://www.youtube.com/channel/UC80PWRj_ZU8Zu0HSMNVwKWw) from where i have learn this all stuffs
* ## Components
in React a components represent a part of the user interface
* they are reusable
* components Type:
1. Functional Component
2. Class Component
example for Functional Component : \
welcome.js
``` js
function welcome(props){
return
Hello, {props.name}
;
}
```
example for Class Component : \
greet.js
```js
class welcome extends Component{
render(){
return
Hello, {this.props.name}
;
}
}
```
To use your Component in other file :\
App.js
```js
import Greet from './components/greet'; // file location
import Welcome from './components/welcome'; // file location
function App() {
return (
);
}
```
* ## uses of JSX and see different without JSX
* With JSX
hello.js
```js
import React from "react";
const Hello = () => {
return(
Hello.. hehee! It's is a JSX function
);
}
export default Hello;
```
* Without JSX
hellohi.js
```js
import React from "react";
const Hellohi = () => {
return React.createElement('div',null,React.createElement('h3',null,"without JSX"))
}
export default Hellohi;
```
the 2nd parameter in create elements is for object key value pairs
that will be appended to the elements \
eg: we need id attributes in div tag
```js
return React.createElement('div',{id:"hello"},React.createElement('h3',null,"without JSX"))
```
Output will be: ```without JSX
```\
* ### JSX difference
1. class -> className
2. for -> htmlFor
3. camelCase property nameing convention
a. onclick -> onClick
b. tabindex-> tabindex
* ## Use of Props and State
* ### Props:
props -> properties is the optional input that your components
can accept its ... also the components are dianamic...
> Porps are immutable
eg: In App.js
```js
import MyPropsFun from '<--path-->';
// and in app function use the tag
Hii its me the childern
```
Now lets make it in suprate file:\
Using : Function....
learnProps.js
```js
import React from 'React';
const MyPropFun = (props) => {
console.log()
return(
Welcome {props.name}
Your Age is :{props.age}
{props.childern}
)
}
export default MyPropFun;
```
Using : Class....
learnProps.js
```js
import React,{Component} from 'React';
class MyPropsFun extends Component{
render(){
return(
Welcome {this.props.name}
Your Age is :{this.props.age}
{props.childern}
)
}
}
export default MyPropsFun;
```
* ### State:
state is managed with in the component and varibles declared in the funcation body
> its mutable (State can be changed)
eg: learnstate.js
```js
import React,{Component} from 'React';
class MyStateFun extends Component{
constructor(){
super()
this.state = {
message:"Give us a star"
}
}
changeDataOut(){
this.setState({
message:"Thanks Your Liking me"
})
}
render(){
return(
{this.state.message}
this.changeDataOut()}>Like
)
}
}
export default MyStateFun;
```
and in App.js
```js
import MyStateFun from '<--path-->';
// and in App function
```
* ## Use Of setState method:
to understand a do and dont with state and setState let us see \
eg : lets check by increment on every click
```js
import React,{Component} from 'react'
class ClickCount extends Component{
constructor(){
super()
this.state={
count:0
}
}
increment(){
this.setState({
count:this.state.count + 1
})
}
render(){
return(
You have clicked this button : {this.state.count}
this.increment()}>Click
)
}
}
```
* When ever we are going to change the set dont do directly ib a function
you can change the state when its under constructor to change the state
in a function you need to use setState method
* setState method has 2 parameters 1st is for the object and 2nd is for
call back function
* > if you see console.log of state value it will be the previous state
So, if you need to execute some code only after the state has been
updated then you need to use call back function to apply this
* let us assume i want to increment by 5 in above example
```js
incrementFive(){
increment()
increment()
increment()
increment()
increment()
}
```
but it is not going to increment 5 times because react render it together
so for that...
```js
increment(){
// if you need multiple parameter then use (pervState,~,~)
this.setState(prevState=>({
count:pervState.count+1
}))
}
```
So, if you do now then you are going to increment 5 times
* ### Summary
* always make use of setState and never modify the state directly
* code has will be executed after the state has been updated so Place
that code in the call back function which is our 2 argument in setState method
* when you have to update state based on the pervious state value then pass in a
function as a 1st argument of setState method which is known as obejct
* ## Destructuring props and state
* Destructuring is an es6 feature thats make its possible to unpack variables
from arrays and properties from object into distinct variables
* in react restructuring props and state improves code readability
* there are 2 ways that we can use in functional components are:
1. Structuring in the parameters
Eg: in App.js import our examble file and type
```js
```
and in our example file .js
```js
const LringStructur = ({name,age})=> {
return(Hello {name} and your age is {age}
)
}
```
2. Destructuring in function body
```js
const LringStructur = props => {
const {name,age} = props
return(Hello {name} and your age is {age}
)
}
```
in Class components
```js
class welcome extends Components {
render(){
const {name,age} = this.props
// its same in state type also
const {state1,state2} = this.state
return(Hello {name} and your age is {age}
)
}
}
```
* ## Event Handling
* any web application you create sometimes its has user interface...
* when the user intaractact with your application then the evets are fired\
eg:
1. mouse click
2. mouse over
3. keypress
4. change event \
etc.... many more
* react events named using camel case
> ```clickHandler```: is a function
> ```clickHandler()```: is a function call
* eg: if we use this :- ```clickHandler()``` on button click function then
it's means the function will already is called, and when we click into that
button nothing will happen...
> event handler is a function not a function call
eg:
```js
class LearnEventHandler extends Component{
changeDataOut(){
console.log("event has been handled")
}
render(){
return(Event Handler)
}
}
```
* ## Binding Event Handlers
* reason of binding event handler is purely because of ```this.```
keyword in js file... it's not because of react
* eg: eventbind.js\
by creating a class and using event handler using ```this.```
keyword will be undefine with in a function
> you should have better knowledge of ```this.``` keyword use.
```js
class MyStateFun extends Component{
constructor(){
super()
this.state = {
msg:"Give us a star"
}
}
changeDataOut(){
this.setState({
msg:"Thanks Your for Liking me"
})
}
render(){
return(
{this.state.msg}
Like me
)
}
}
```
we will get a error that this is undefine because this is not define under a event handler
> ```this``` keyword is undefined in an event handler that is the reason why it's necessary to learn event binding react class component
* There are multiple types of event handlers list goes something like this:
1. Using bind keyword
```Like me```
Every update to the status cause the component to rerender and this in return brand new event handler on every render...\
> It can create a issue at component that content nested childrens component
2. Use arrow function in render method
```this.changeDataOut()}>Like me```
3. binding the event handler in the construct as a post to binding in the rerender method
```js
constructor(){
super()
this.state = {
msg:"Give us a star"
}
this.changeDataOut = this.changeDataOut.bind(this)
}
changeDataOut(){
this.setState({
msg:"Thanks Your for Liking me"
})
}
render(){
return(
{this.state.msg}
Like me
)
}
```
4. Using a arrow function as a class property
```js
constructor(){
super()
this.state = {
msg:"Give us a star"
}
}
changeDataOut=()=>{
this.setState({
msg:"Thanks Your for Liking me"
})
}
render(){
return(
{this.state.msg}
Like me
)
}
```
* ## Methods as props
* Using parent component can pass down props to the childrens component but if a child
component wanted To communicate with the parents component then we still can use props
but this time we pass in a reference Tu to a method as props to the child component
* eg: I want to call a method in the parent component from a button in a child component
So we will create two files one will be parents.js another will be children.js\
parents.js
```js
import Childern from './childern';
class Parents extends Component{
constructor(props){
super()
this.state = {
defmsg:"Dear,"
}
this.callpopupalert = this.callpopupalert.bind(this)
}
callpopupalert(){
alert(`Hello ${this.state.defmsg}`)
}
*/
render(){
return(
)
}
}
```
children.js
```js
function Childern(props){
return(
Alert plz
)
}
```
> So if you need to pass a parameter by calling parent method you can do like:\
In parents.js ``` props.popupalert('Sukarna')}>alert```\
and In childrens.js ```popupalert(msg){alert(`Hello ${this.state.defmsg} ${msg}`)}```
* ## Conditional Rendering
* when you build a react application you may need to show or hide the HTML based on the conditon
* there are different type of contion in react:
1. if/else
it's like :\
create a class component and in that we will change the state based on if/else...
```js
// inside constructor...
this.state = { permition: false }
render(){
if(this.state.permition){
return
wow you are allowed
} else{
return sorry you are not allowed
}
}
```
2. element variables
```js
render(){
let msg
if(this.state.permition){
msg = wow you are allowed
} else{
msg = sorry you are not allowed
}
return({msg})
}
```
3. ternary conditionl operator
* we can use this under JSX
```js
render(){
return(
this.state.permition ? wow
: oops
)
}
```
4. short circuit operator
* do or just leave
```js
render(){
return(
this.state.permition && wow
)
}
```
* ## List Rendaring
* sometimes you might have to display list of datas...
* in JS we have a *map method* to itterate over array and return with changes
* ### quick look of ```map``` method
* the *map()* method creates a new array with the results of calling a provided function
on every elements in the array
```js
var myarray = [1,2,3,4]
const mapping = myarray.map(x => x*2)
console.log(mapping)
// Output : [2,4,6,8]
```
* we can handel list in some ways like :
1.
```js
const name = ["Sukarna","spoothi","poomee"]
return(
{name[0]}
{name[1]}
{name[2]}
)
```
2.
```js
const name = ["Sukarna","spoothi","poomee"]
return(
{
data = name.map(x => {x}
)
}
)
// OR
const data = name.map(x => {x}
)
return({data})
```
3. if you have multiple data then
```js
const data=[
{
id:1,
name:'Sukarna Jana',
age:17
},
{
id:2,
name:'Spoorthi S',
age:17
},
{
id:3,
name:'Poornima',
age:17
}
]
const datalist = data.map(x => (
Name:{x.name}, Age:{x.age}
))
```
> But doing in this way you will see a error in console
```Each child in an array or interalor should have a unique "key" porps```
* So, we need to see the unique data so as we know our id is unique
```js
const datalist = data.map(x => (
Name:{x.name}, Age:{x.age}
))
```
> key is a reserved props so you can't use
* ```key``` is a special string attribute you need to include when creating lists as elements
* key gives the element a stable indentity
* keys help react to identify which items have changed are added or are removed
* help in efficient update at the user interface
* ### Index as key
> avoid if possible
* we can use index of element in the key
```js
const datalist = data.map((x,index) => (
{x}
))
```
1. the items in your list do not have a unique id (it you have someting unique
then use that only as a key)
2. the list is a static list and will not change (never add item to the list, removing
items from the list)
3. the list will never be reordered or filtred
* ## Styling and CSS Basic
* styling React Components
1. CSS Stylesheets
file: myStyle.css
```css
.myMainstyle{
color:#ff00ff
}
```
file: MainApp.js
```js
import './myStyle.css'
function App(props){
let styleType = props.primary? 'myMainstyle':''
return(
Hello
//or
Hello
)
}
```
2. Inline Styling
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
eg:
```js
function App(){
const styleType = {
fontSize:'50px',
color:'red'
}
return(
Hello
)
}
```
3. CSS Modules
The module CSS files are be like : ```FILENAME.module.css```
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
file: myStyle.module.css
```css
.myMainstyle{
color:#ff00ff
}
```
file: MainApp.js
```js
import style from './myStyle.module.css'
function App(){
return(
Hello
)
}
```
4. CSS in JS Libaries
> not going to learn now
* ## Form Handling
* They are also known as *Control Components*\
this are elements whoes value is control by react
* ```onClick={...}``` its fired when ever there is a change in input field.
* when we submit the form its reload to prevent that
```js
showForm = (event) => {
//The task you want to do just do...
event.preventDefault()//<- it will prevent from reloading the page
}
//inside form
Submit
```
* I hope by the bellow example you have get how it's working
```js
class MainForm extends Component{
constructor(){
super()
this.state={
name:'',
age:0,
day:'Sun',
say:''
}
}
writeName = (event) =>{
this.setState({
name:event.target.value
})
}
writeAge = (event) =>{
this.setState({
age:event.target.value
})
}
writeDay = (event) =>{
this.setState({
day:event.target.value
})
}
writeSay = (event) =>{
this.setState({
say:event.target.value
})
}
showForm = (event) => {
alert(`Great ${this.state.name} Your Form has submited successfuly\n
Your Name: ${this.state.name}\n
Your Age : ${this.state.age}\n
Today is : ${this.state.day}\n
Your Quary is : ${this.state.say}`)
event.preventDefault()
}
render(){
return(
Name
Age
What is the Day
Sunday
Monday
Tuesday
Wednesday
Thursday
Friday
Saturday
Want to say something
Submit Form
)
}
}
```
* ## LifeCycle Methods
* ### Mounting
* mounting lifecycle are called when an instance of a component is being created and inserted
into the DOM \
eg: ```constructor```,```static getDerivedStateFromProps```,```render``` and ```componentDidMount```
* ```constructor(props)```
* A special function that will get called whenever a new components is created
* used for initilizing state,binding the event handler
* do not cause side effects eg:- HTTP Requests.
* when you create your own components call - ```super(props)``` & directly overwrite ```this.state```
* ```static getDerivedStateFromProps(props,state)``` (rerely use lifecycle mount)
* is used when the state of the component depends on changes in props over time.
* used for set state (need to return object that represent the new state of the components)
* do not cause side effect eg:- HTTP requests.
* ```render()```
* only required method
* used for read props & states and return JSX
* do not change states or interact with DOM or make ajax calls
* children components lifecycle methods are also executed
* ```componentDidMount()```
* call only once in the whole life cycle of a given component
* it is invoked immediatly after a component and all its children components have been render fo the DOM
* used for cause side effect eg:- Interact with the DOM or perform any ajax calls to loud data
* In CODES its look like
```js
//create a class
constructor(props){
super(props)
this.state={
data:"Hi"
}
/* <--- Our Lifecycle A ---> */
}
static getDerivedStateFromProps(props,state){
/* <--- Our Lifecycle B ---> */
return null
}
componentDidMount(){
/* <--- Our Lifecycle D ---> */
}
return(){
/* <--- Our Lifecycle C ---> */
return hi
}
```
if a component has a child component thin the flow will be :- \
```js
/* <--- Our Lifecycle A1 ---> */
/* <--- Our Lifecycle B1 ---> */
/* <--- Our Lifecycle C1 ---> */
/* <--- Our Lifecycle A2 ---> */
/* <--- Our Lifecycle B2 ---> */
/* <--- Our Lifecycle C2 ---> */
/* <--- Our Lifecycle D2 ---> */
/* <--- Our Lifecycle D1 ---> */
```
* ### Updating
* when a component is being re-rendered as a result of changes to either its props or state\
eg: ```getSnapshotBeforeUpdate```,```static getDerivedStateFromProps```,
```shouldComponentUpdate```,```render``` and ```componentDidUpdate```
* ```static getDeriveStateFromProps(props,state)```
* 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
* method is called everytime a component is re-rendered
* is used to set the state
* do not cause any side effect eg: HTTP requests
* ```shouldComponentUpdate(next props,next state)```
* detects is the component should re-render or not\
( Defalt: class component re-render on every changes )\
So, to prevent that we use this
* performance optimization
* do not cause side effect eg: HTTP request...
* calling the setState method
* ```render()```
* only required method
* read props & state and return JSX
* do not change state or interact with DOM or make ajax calls
* ```getSnapshotBeforeUpdate(perv Props, prev State)```
* called right before the changes from the virtual DOM are to be certified in DOM
* capture some information from the DOM
* method will either return null or return a value
* render value will be passed as the 3rd parameter to the next method
* ```componentDidUpdate(prev Props, prev State, snapshot)```
* called after the render is finished in the re-render cycles
* cause side effects
* In CODES its look like
```js
//create a class
constructor(props){
super(props)
this.state={
data:"Hi"
}
}
static getDerivedStateFromProps(props,state){
/* <--- Our Lifecycle A ---> */
return null
}
shouldComponentUpdate(){
/* <--- Our Lifecycle B ---> */
return true
}
getSnapshotBeforeUpdate(prev props,prev state){
/* <--- Our Lifecycle D ---> */
return null
}
componentDidUpdate(){
/* <--- Our Lifecycle E ---> */
}
change=()=>{
this.setState({
data:"hello"
})
}
return(){
/* <--- Our Lifecycle C ---> */
return State changes
}
```
if there is a child component too then
```js
/* <--- Our Lifecycle A1 ---> */
/* <--- Our Lifecycle B1 ---> */
/* <--- Our Lifecycle C1 ---> */
/* <--- Our Lifecycle A2 ---> */
/* <--- Our Lifecycle B2 ---> */
/* <--- Our Lifecycle C2 ---> */
/* <--- Our Lifecycle D2 ---> */
/* <--- Our Lifecycle D1 ---> */
```
if once both child & parents are done then ```getSnapshotBeforeUpdate(perv Props, prev State)``` will be
```js
//...
/* <--- Our Lifecycle D2 ---> */
/* <--- Our Lifecycle E2 ---> */
/* <--- Our Lifecycle D1 ---> */
/* <--- Our Lifecycle E1 ---> */
```
* ### Unmounting
* when a component is being removed from DOM eg: ```componentWillUnmount```
* ```componentWillUnmount```
* method is invoked immediately before a component is unmounted and distroyed
* (clean up task) cancelling any network requests removing event handaler, cancelling any subscription and also invalidating timers
* do not call the setState method
* ### Error Handaling
* when there is an error during rendering in a lifecycle method or in the constructor of any child component eg: ```static getDerivedStateFromError``` and ```componentDidCatch```
* ```static getDerivedStateFromError(error)```
* ```componentDidCatch(error,info)```
* ## Fragments
* A common pattern in react is for a component to render multiple elements
* fragments let you group a list of children without adding extra nodes to the DOM
* eg:
```js
function Mydata(){
return(
Data 1
Data 2
)
}
// we commenly wright in this way but this is adding a useless tag
/*
* if we inspect app.js or browser
* <- of app.js
* <- of components
* Data 1
* Data 2
*
*
*/
```
SO, to get rid of that extra `````` tag
```js
function Mydata(){
return(
Data 1
Data 2
)
}
```
* more practical use will be like:
> create 2 files
* file1.js
```js
Table:-
Name
Relation
DOB
```
* file2.js
```js
//if we use
Sukarna Jana
Author of this page
19-09-2003
Spoorthi S
Author's Best Friend
05-08-2003
```
then we will get a error on console because in table child component should not have `````` in between SO, its wrong then `````` comes handy
```js
Sukarna Jana
Author of this page
19-09-2003
Spoorthi S
Author's Best Friend
05-08-2003
```
* ## Pure components
* to make a pure components:
```js
import React,{PureComponent} from 'react'
class MyPureCom extends PureComponent{
/*
* Your Other code
*/
}
```
* to understand more properly we will make 3 files
1. Parent Component
```js
import React,{Component} from 'react';
import MyPureComp from './MyPureComp';
import MyRegularComp from './MyRegularComp';
class ParentOfPureRegular extends Component{
constructor(props){
super(props)
this.state={
count:0
}
}
componentDidMount(){
setInterval(() => {
this.setState({
count: 0
})
},2000)
}
render(){
console.log("this is the Parent of pure and regular component")
return(
Parent of pure and regular component
)
}
}
```
2. Pure component
```js
import React,{PureComponent} from 'react';
class MyPureComp extends PureComponent{
render(){
console.log("Pure Component is re-rendered")
return(
This Pure Component has been re-render {this.props.data} (See in console)
)
}
}
export default MyPureComp;
```
3. Regular Component
```js
import React,{Component} from 'react';
class MyRegularComp extends Component{
render(){
console.log("Regular Component is re-rendered")
return(
This Regular Component has been re-render {this.props.data} (See in console)
)
}
}
export default MyRegularComp;
```
*
Regular Component
Pure Component
* A regular component does not implement the ```shouldComponentUpdate()``` method. Its always return true as default
* A pure component on other hand implements ```shouldComponentUpdate()``` method with a shallow propsvand state components
* ### Shallow Comparison (we will call as : SC)
* #### Primitive Type (num,str,boolen)
* a SC b return true if a and b have the same value and are of same types\
eg: string: 'SJ' SC string: 'SJ' returns true
* #### Complex Types (object,array...)
* a SC b returns true if a & b reference to exact same object\ eg:
```js
var a = [1,2,3];
var b = [1,2,3];
var c = a;
var ab_eq = (a===b); //false
var ac_eq = (a===c); //true
/* another example */
var a = {x:1,y:2};
var b = {x:1,y:2};
var c = a;
var ab_eq = (a===b); //false
var ac_eq = (a===c); //true
```
* SC of prevState with current State\
SC of prevProps with current Props\
if there is a difference they re-render component
* if parents not re-render then childeren will also not re-render
* never mutate the state, always return a new object that reflects the new state
* #### Pure component : if there is no difference the component is not re-rendering
- performence Boost
- its a good idea to ensure that all the childern components are also pure to avoide unexpacted behaviour
* ## Memo
> version 16.6 above
* Pure component only re-render the class component when their ia a difference in shallow comparison of props/states
* prue component only work with class based component
* to use in function component the same feature then ```React.memo``` comes in place
* memo(function) == PureComponent(class)
* eg:- ```MyMemoComp.js```
```js
import React from 'react';
function MyMemoComp({data}){
console.log("Memo Component is re-rendered")
return(
This Pure Component has been re-render {data} (See in console)
)
}
export default React.memo(MyMemoComp);
```
* in earlear code where parents component re-render in every 2sec. include this child
``````
* and when we see output memo is render onces and parents keep on re rendering
* ## Refs
* Refs make possible to access DOM notes directly without react\
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)
* example i want to focus on input while page opens / reload
* there is 3 steps:
- Step 1 : (Create a refs)
```js
// inside constructor
this.inputRef = React.createRef()
//...
```
- Step 2 : (attach the Refs to our input element in the render method )
```js
// we use 'ref' attribute
//....
//....
```
- Step 3 : ( call the focuse method on this input element )\
but first what exetly does the property hold after a ref is created So, we will:
```js
componentDidMount(){
console.log(this.inputRef)
}
```
after doing this we will get a output like:\
Console: Object>current:input...>...\
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
```js
componentDidMount(){
this.inputRef.current.focus()
//console.log(this.inputRef)
}
```
- So, 2nd use of ref is to fetch the input value
```js
//inside render
Click
//...
```
Lets create ifetch function
```js
ifetch = () => {
alert(this.inputRef.current.value)
}
```
we are accessing the value property of the input DOM note as a current property
* React has a 2nd way to set refs which is called 'CallBack ref' (it's Old way)
- Step 1:
```js
// inside constructor()
this.cbRef = null
// Created a property asign a value of null
this.setCbRef = (element) => {
this.cbRef = element
// created a method asign a DOM element to the Ref
}
```
- Step 2:
```js
```
- Step 3:
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
```js
componentDidMount(){
if(this.cbRef){
this.cbRef.focus() // we can access directly without using current
}
}
```
* ### Refs with class components
* 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
eg: File1Input.js
```js
//create a class
//create a constructor
this.inputRef=React.createRef()
//create a method
focusInput(){
this.inputRef.current.focus()
}
//inside return
```
Now we will create a parent component File2FocusInput.js
```js
import YourClassName from './FIle1Input'
//create a class
//inside constructor()
this.componentRef = React.createRef()
clickHandler = () =>{
this.componentRef.current.focusInput()
// focusInput() its came from child component
}
//inside return
```
So, output will be when even i click the button its get focus into the text box
* ### Forwording refs
* is a tecnic for automatickly passing a ref through a component to one of their child
* eg:\
Parent Component - FRParentInput.js
```js
//import your child component
import FRInput from './FRInput'
import React, { Component } from 'react'
class FRParentInput extends Component{
constructor(props){
super(props)
this.inputRef = React.createRef()
}
clickMe = ()=>{
this.inputRef.current.focus()
}
render(){
return(
)
}
}
```
and in child component - FRInput.js
```js
import React from 'react'
const FRInput = React.frowardRef((props,refrence)=>{
return
})
* ## Portals
* Provide a way to render children into s DOM note exist outside the DOM higher key of parent component
* eg: So far we have only 1 DOM element node in HTML that we ware mounting in our react application
* if we see ```index.html``` we will get to see ```
...```
* and in ```index.js``` we get to see:\
```js
ReactDOM.render(,document.getElementById('root'));
```
* portal provide the ability to break out of the DOM tree
* For creating our own lets create and understand by an example:
* (Create a DOM note which fall outside the root element)
- Step 1: (In ```index.html``` write)
```...```
- Step 2: (lets create a new component) MyPortal.js
```js
import React from 'react'
import ReactDOM from 'react-dom'
function MyPortal(){
return ReactDOM.createPortal(
Woow i am outside 'root'
,
document.getElementById('MyCustomPortal')
)
}
export default MYPortal
```
- Step 3: (Add in main File which is App.js)
* ReactDOM.createPortal(TAKES 2 PARAMETER)
- 1. JSX which you want to render
- 2. DOM note to mount the element
* ## ERROR Boundary
* Error handling phase methods
- static getDerivedStateFromError(error)
- componentDidCatch(error,info)
* When there is a app crash it kept into a broken state (it's unmount component tree)
* we can catch a error in component tree and display a fall back UI
* a class component that implements either 1 or both of the lifecycle methods
- getDerivedStateFromError or componentDidCatch becomes an error boundary
* 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
* example: MyBFF.js
```js
import React from 'react'
function MyBFF({BFFName}){
if(BFFName!='spoorthi'){
throw new Error(`No!, ${BFFName} is not authors BFF`)
}
return(
Yea {BFFName} is Authors BFF
)
}
//...
```
and in main file (App.js)
```js
```
But the whole UI crash
* we dont want this if a perticular component throus error only that component should back into UI and other component should not be effected
* so, MyERRORBoundary.js
```js
import React,{Component} from 'react'
class MyERRORBoundary extends Component{
constructor(props){
super(props)
this.state={
hasError:false
}
}
static getDerivedStateFromError(error){
return{
hasError:true
}
}
componentDidCatch(error,info){
console.log(error)
console.log(info)
}
render(){
if(this.state.hasError){
return
Ooops! Something went wrong
}
return this.props.children
}
}
export default MyERRORBoundary;
```
in MyBFF.js
```js
import React from 'react'
function MyBFF({BFFName}){
if(BFFName!=='spoorthi'){
throw new Error(`No!, ${BFFName} is not authors BFF`)
}
return(
Yea {BFFName} is Authors BFF
)
}
export default MyBFF;
```
in App.js
```js
```
- output will be : \
Yea spoorthi is Authors BFF \
No!, nandan is not authors BFF
> you will still see error because product is in developing stage so by clicking in ```x``` at corner you can see the actual output
* ### Summary
* error boundaries are react component that catch js error in their child component tree, log thoes error and display a fall-back UI
* A class component becomes an error boundary by defining either both of getDerivedStateFromError and componentDidCatch life cycle method
* 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
* provide a way to gracetully handle error in application code
* ## Higher Order Components - HOC
* let me start with a counter example...\
eg: ClickCount.js
```js
class ClickCounter extends Component{
constructor(props){
super(props)
this.state = {count:0}
}
incrementCount = () => {
this.setState(prevState =>{
return {count:prevState.count+1}
})
}
render(){
const {count} = this.state
return Click {count} times
}
}
```
this was no. of click but if i include the count no. hover then we need to dublicate the whole code and add ```
You have hover from me {count} times
```
* we are dublicating code not reusing the function means in click counter and hover counter we are just rewrite the same function
* Component Tree
Parent -> clickCounter (both are shareing same parents)
-> howerCounter (state is taken from parent and props are same for both)
* lift counter logic to parents and pass props but if:
parent -> clickCounter
-> component A > component B > howerCounter
(then its create problem)
* ### what is HOC
* a pattern where a function takes a component as an argument and returns a new component
*
```js
const NewComponent = higherOrderComponent(orginal component)
/* NewComponent we also say as : enhanced component
```
> Advantage : all the states will different for differen component
* eg: firstCounter.js
```js
import React,{Component} from 'react'
// MyHOCCounter is our new component
// WrappedComponent is our orginal component (props)
const MyHOCCounter = WrappedComponent=>{
class MyHOCCounter extends Component{
constructor(props){
super(props)
this.state = {count:0}
}
incrementCount = () => {
this.setState(prevState =>{
return {count:prevState.count+1}
})
}
render(){
return(
)
}
}
return MyHOCCounter
}
export default MyHOCCounter;
```
Now we will use to track No. of click\
HOCClick.js
```js
import React, {Component} from 'react'
import MyHOCCounter from './firstCounter'
class HOCClickCounter extends Component{
render(){
const {count,incrementCount} = this.props
return You have clicked {count} times
}
}
export default MyHOCCounter(HOCClickCounter);
```
Now we will use to track No. of hover with the same counter (MyHOCCounter)\
HOCHover.js
```js
import React, {Component} from 'react'
import MyHOCCounter from './firstCounter'
class HOCHoverCounter extends Component{
render(){
const {count,incrementCount} = this.props
return
You have clicked {count} times
}
}
export default MyHOCCounter(HOCHoverCounter);
```
* the props is passed to the HOC but not to the component that rapped \
So, to fixed this in HOC
```
{...this.props}
...
```
by this it says other remaning props just passout
* if you dont want to use ```...this.props``` then\
Counter.js
```
...{this.props.name}...
```
and in app.js
``````
- then it is not going to show any thing 'sj' So, by using {...this.props}
* passing parrameter in HOC function
```
const withCounter(WrappedComponent,NoOfComp..)=>{
...
}
```
* ## Render Props
* the term "render props" refers to a tecnique for sharing code between react component using a props whoes value is a function
* lets understand by example...
- Example 1: passing a function in the tag
```js
'Sukarna'}/>
```
and to use that function
```js
//...
return(
{this.props.name}
)
```
- Example 2: if we need parameter to the function in the props based on parameter changes the output then,
```js
nameIs?'Sukarna':'Gest'}/>
```
and the in function:
```js
//....
class IsUserName extends Component{
render(){
return(
{this.props.name(true)}
)
}
}
//....
```
- Example 3: we will make a counter...\
renderFile.js
```js
//...
class CounterRenderProps extends Component{
constructor(props){
super(props)
this.state={
count:0
}
}
incrementCount = () =>{
this.setState(prevState=>{
return{count:prevState.count+1}
})
}
render(){
return(
{this.props.render(this.state.count,this.incrementCount)}
)
}
}
//...
```
parent where it will be in use...
```js
(
)}/>
```
to handel the props another file...
```js
//...
class RunRenderPropCount extends Component{
render(){
const {count,counter} = this.props
return(
render counter from props
You have clicked - {count}
)
}
}
//...
```
- if you want to passas a children u can by just
```
{this.props.childern(...)}
```
and the place you want to use
```
{...your function...}
```
* ## Context
* context propvide a way to pass data through the component tree without having to pass the props down manually at every level
App -> CA1
-> CA2 > CB2 > CC2
-> CA3 > CB3 > CC3 > CD3
I need a props should go from app to CD3 directly so then context comes
* we can do this in 3 step:
- Step1: Create context
```js
const UserContext = React.createContext()
```
now the ```createContext``` method comes with a provider and a consumer react component to grab that ...
```js
const UserProvider = UserContext.Provider
const UserConsumer = UserContext.Consumer
```
to use in other component you need to export it
```export {UserProvider,UserConsumer}```
- Step2: Provide a context value \
at the top level where the props is going to pass to other nested component tree
```js
import {UserProvider} from 'filePath'
// pass to component tree
```
- Step3: Consume the context value \
now the component which required the pass on value
```js
//this is CD3
import {UserConsumer} from 'filePath'
//...
{name=>{
return
{name}
}}
```
our username is the pass on value which we passed in ``````
* We can set a defalt value to our context
- Step1: while creating the context its pass as a argument to create context method
```js
const UserContext = React.createContext('Jana')
```
if you dont use `````` ths "Jana" will be defalt will pass to ``````
* ### Context type property
at last example we see that how to use UserConsumer to consume the context value, But there is a other way : \
- Use context type property on a class, for that we need to pass ```UserContext``` only
```js
export default UserContext
```
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}```...
- if your application supports public class fild sintax we can replace ```CLASS_NAME.contextType = UserContext``` by typing inside the render() ```static contextType = UserContext```
> Its has a limitation that its only work with class component
* ### consume multiple context
* Example
```js
function content(){
render(
{theme=>(
{user=>(
)
}
)}
)
}
```
* ## Mini Project to understand HTTP GET & POST
> 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```
* see the code once
- For Posting [CODE](demo/src/components/HTTPPostData.js)
- For Fetching [CODE](demo/src/components/HTTPGetFetch.js)
# About Hooks
* ## What is Hooks?
Hooks are a new feature addition in React Version 16.8.0 which will allow you to use React feature without having to write a class, eg: State of the component
> Hooks don't work inside classes...
* ## Why Hooks?
- Reason1:
* understand how "this" keywords works in JS
* remember to bind event handler in class components
* classes don't midify very well & makes hot reloading very unreliable
With hooks we dont use class so all this porblem are solve
- Reason2:
* there is no periticular way to reuse state full component logic
* HOC & render props patterns do address this problem
* makes the code harder to follow
* there is need a to shere state full logic in a better way
- Resion3:
* create components for complex scenarios such as data fetching & subscribing to events
* related code is not organized in one place \
example: data fetching - in componentDidMount & componentDidUpdate
example: event listeners - in componentDidMount & componentWillUnmount
* Because of this statefull logic - cannot break components into smaller onces
- Note worthy points:
1. it will work only in React verison 16.8 or higher
2. Hooks don't contain any breaking changes & the release is 100% backword compatible
3. Classes won't be removed from react there are still there
4. you can't use hooks inside of a class Component
5. now hooks provide a more direct API to the react concepts you already know
* ## Rules of hooks
* only call hooks on the top level
* don't call hooks inside loops, conditions or nested function
* only call hooks from react function
* call them from with in react functional component and not just any regular JS function
* ## useState
* 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...
* 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
* Example 1: lets creat a counter
- normally we use without hooks was : Create class > create state > create method > in render add button with onClick event
- but now using Hooks:\
(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)
```js
import React,{useState} from 'react'
function CounterOne(){
const [count,setCount] = useState(0)
return(
setCount(count+1)}>Your Count is {count}
)
}
export default CounterOne;
```
* ## useState hooks with previous state
example: we will use count method but with increment, dicrement, reset
* without taking previous state and doing task is unsafe (its not the right way to change state value )
```js
function CounterTwo(){
const initialValue = 0;
const [count,setCount] = useState(initialValue);
const incrementFive = () => {
for(let i = 0; i < 6; i++){
setCount(prevState=>prevState + 1)
}
}
/* Another way to increment 5 is
const incrementFive = () => {setCount(prevState=>prevState.count + 5)}
*/
return(
Present Value: {count}
setCount(initialValue)}>Reset
setCount(prevState=>prevState+1)}>Increment
setCount(prevState=>prevState-1)}>Dicrement
Increment 5
)
}
```
* ## useState hooks with object
lets understand by a demo
```js
function CounterObject(){
const [UserData,setUserdata] = useState(
{firstName:"",lastName:"",age:18})
/*
by defalt firstName and lastName... is '' but when we start writing
any one of them the other will vanish this is because useState doesnot
automatically mearge and updates the object So, we use spread operater
'...UserData,' by this we are spreading the pervious state and overwriting
the previous state with the new onces...
*/
return(
setUserdata({...UserData,firstName:e.target.value})}/>
setUserdata({...UserData,lastName:e.target.value})}/>
setUserdata({...UserData,age:e.target.value})}/>
Your inserted data is :
- Your First Name : {UserData.firstName}
- Your Last Name : {UserData.lastName}
- Your Age : {UserData.age}
)
}
```
> So, the setter function provided by the useState hooks doesnot automatically mearge and update object we have to do that manually
if you want to see the JSON state then ```{JSON.stringfy(data)}```
* ## useState hooks with array
example: how to use hooks if state value is array we will understand by making a simple todo application
```js
function todo(){
const [item,setItem] = useState([])
const [inputData,setInputData] = useState("")
const addItem = (e) => {
e.preventDefault()
setItem([...item,{data:inputData,id:item.length}])
}
return(
{setInputData(e.target.value)}}/>
Add ToDo
Your ToDo
{item.map(value=>(- {value.data}
))}
)
}
```
* ### Summary - useState()
- the useState hook lets you add state to function component
- in classes the state is an object
- with the useState hooks, the state dosenot have to be an object
- the useState hook returns an array with 2 elements
- the first element is the current value of the state, and the second element is a state setter function
- new state value depends on the previous state value? you can pass a function to the setter function
- when dealing with object/array always make sure to spread your state variable and then call the setter function
* ## useEffect
* 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
* - Example 1 : updating the document title to the current counter value
```js
componentDidMount(){
// this will render only onces in component lifecycle
document.title=`Clicked ${this.state.count}` //A1
}
componentDidUpdate(){
// to update we stuffs when ever their will be a change
document.title=`Clicked ${this.state.count}` //A2
}
```
- Example 2 : timmer, we well log hello every 5 sec. well create tis timmer in the class component will be removed from DOM
```js
componentDidMount(){
// this will render only onces in component lifecycle
this.interval = setInterval(this.tick,1000) //B1
}
componentDidUpdate(){
// to update we stuffs when ever their will be a change
clearInterval(this.interval) //B2
}
```
- 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
* So, to solve this we have useEffect hooks
1. the effect hook lets you perform side effects in function component
2. it is a close replacement for componentDidMount, componentDidUpdate & componentWillUnmount
* ### useEffect after render
* for this example we will memic componentDidMount & componentDidUpdate but in function component using useEffect
* we will make a code to counter and on every click will update the title
- without useEffect hooks it was like
1. create class
2. create state
3. create componentDidMount() for initial value
4. create componentDidUpdate(prevProps,prevState)
5. render
6. onclick increment the state variable
- with useEffect
```js
function CounterOneEffect(){
const [count,setCount] = useState(0)
// we pass in a paremeter which is a function
// which will get executed after every render of the component
useEffect(()=>{
document.title = `Clicked ${count}`
})
return(
setCount(count+1)}>Increment title
)
}
```
> useEffect runs after every render of the component
* ### useEffect conditionally run effects
- 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
- 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 \
then without using Hooks
```js
componentDidUpdate(prevProps,prevState){
if(prevState.count !== this.state.count){
document.title = `Clicked ${count}`
console.log('Document title has updated')
}
}
```
- but now using hooks
```js
import React,{useState,useEffect} from 'react'
function CounterTwoEffect(){
const [count,setCount] = useState(0)
const [name,setName] = useState('')
useEffect(()=>{
document.title = `Clicked ${count}`
},[count])
return(
setName(e.target.value)}/>
setCount(count+1)}>Increment title
)
}
```
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
* ### Run effect only onces
- means we will mimic ```componentDidMount()```, So we will pass 2nd parameter as a empty [] in useEffect
- example:
```js
function MouseThrEffect(){
const [x,setX] = useState(0)
const [y,setY] = useState(0)
const logMousePosition = e =>{
console.log("Mouse Event")
setX(e.clientX)
setY(e.clientY)
}
useEffect(()=>{
console.log("MouseThrEffect is called")
window.addEventListener('mousemove',logMousePosition)
},[])// because of this [] it will run only onces
return(
Mouse positon in this screen - X:{x},Y:{y}
)
}
```
* ### useEffect with cleanup
- we will memic ```componentWillUnmount()```, we 'return' a function which will run when component unmounts (whenever we 'return' its a cleanup function)
- Example: if i want to stop tracking the mouse
```js
function EffectMouse(){
const [x,setX] = useState(0)
const [y,setY] = useState(0)
const logMousePosition = e =>{
console.log("Mouse Event")
setX(e.clientX)
setY(e.clientY)
}
useEffect(()=>{
console.log("MouseFouEffect is called")
window.addEventListener('mousemove',logMousePosition)
return ()=>{
console.log("MouseFouEffect has unmount")
window.removeEventListener('mousemove',logMousePosition)
}
},[])
return(
Mouse positon in this screen - X:{x},Y:{y}
)
}
export function MouseFouEffect(){
const [display,setDisplay] = useState(true)
return(
setDisplay(!display)}>Unmount
{display ? : Mouse Event has Unmount
}
)
}
```
* ### useEffect with incorrect dependency
- we will take the mistake So, not required but 1 way has 2 tricks to do the same job
- example: keep on counting every 1sec.
```js
const tick() => {setCount(count+1)}
useEffect(()=>{
const interval = setInterval(tick,1000)
return()=>{
cleanInterval(interval)
}
},[count])
```
or
```js
const tick() => {setCount(pervState=>prevState+1)}
useEffect(()=>{
const interval = setInterval(tick,1000)
return()=>{
cleanInterval(interval)
}
},[])
```
- to run multiple useEffect to run then make sure you suprate them out thather then having a code in single useEffect
* ### lets make a mini project to Fetch data with useEffect
1. take the data fetch it and stop (render onces) [FetchOneuseEffect.js](demo/src/hookComponents/FetchOneuseEffect.js)
2. we will fetch individual post by passing in the post id get request [FetchTwouseEffect.js](demo/src/hookComponents/FetchTwouseEffect.js)
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)
* ## useContext hooks
* as we know "context" provide a way to pass data through the component tree without having to pass props down manually at every level
* we used to do before using hooks, we use to create:
```js
export const UserContext = React.createContext()
```
and when we will start passing
```js
```
and where we want to consume
```js
{user=>{
{user}
}}
```
* if multiple context
to send:
```js
```
to fetch:
```js
{age=>{
return(
{user=>{{user},{age}
}}
)
}}
```
* now using hook ```useContext()```
- there are 3 different step to consume value on other component tree
- Step 1 :
```import {useContext} from 'react'```
- Step 2 :
```js
//import The Nessary Context
import {UserName,UserAge} from 'From_Context_File'
```
the place you are importing from should have
```js
export const UserName = React.createContext()
export const UserAge = React.createContext()
```
- Step 3 :
* call the useContext function by passing in a contexts as its argument and its return the context value
* inside a function()
```js
const Data1 = useContext(UserName)
const Data2 = useContext(UserAge)
```
and just use that variable where you want to ...
* to create a context is normal provider
```js
export const userData = React.createContext()
return(
)
```
and the place you want to consume
```js
const data = useContext(userData)
```
and use where ever you want
* ## useReducer
* useReducer is a hook that is used for state management
* it is an alternative to useState
* ### what's the different?
- useState is built using useReducer
* useReducer hook is related to reducers
* what is reduce?
- > its in vanala JS / a normal JS So, we need to understand reducers to understand the hooks
- the ```reduce()``` method executes a reducer function (that you provide) on each element of the array, resulting in a single output value
* 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 \
example:
```js
const array1 = [1,2,3,4];
const reducer = (accumulation,currentvalue) => accumulation + currentvalue;
// 1 + 2 + 3 + 4
colsole.log(array1.reduce(reducer));
// Output : 10
// 5 + 1 + 2 + 3 + 4
colsole.log(array1.reduce(reducer,5));
// Output : 15
```
*
Reduce in JS
useRucer Hooks
1. array.reduce(reducer,initialValue)
1. useReducer(reducer,initialState)
2. singalValue = reducer(accumulator,itemValue)
2. newState = reducer(current,action)
3. Retuce method and returns a singal value
3. useReducer returns a pair of value [newState,dispatch]
* ### Summary
* useReducer is a hook that is used for state management in react
* useReducer is related to reducer function
* useReducer(reducer,initialState)
- reducer(currentState,action)
* useReducer (simple state & action)
- we will create a counter with increment, decrement, reset button
```js
import React,{useReducer} from 'react'
const initialState = 0
const reducer=(state,action) =>{
switch(action){
case 'increment':
return state + 1
case 'dicrement':
return state - 1
case 'reset':
return initialState
default:
return state
}
}
function SimpleUseReducer(){
const [count,dispatch] = useReducer(reducer,initialState)
return(
useReducer hooks
{count}
{dispatch('increment')}}>increment
{dispatch('dicrement')}}>dicrement
{dispatch('reset')}}>reset
)
}
```
* ### useReducer (complex state & action)
- Example 1 : Its a object type
```js
const initialState2 = {
firstCounter:0
}
const reducer2=(state,action) =>{
switch(action.type){
case 'increment':
return {firstCounter:state.firstCounter + 1}
case 'dicrement':
return {firstCounter:state.firstCounter - 1}
case 'reset':
return {firstCounter:initialState}
default:
return {state}
}
}
function ComplexUseReducer(){
const [count,dispatch] = useReducer(reducer2,initialState2)
return(
useReducer hooks complex
{count.firstCounter}
{dispatch({type:'increment'})}}>increment
{dispatch({type:'dicrement'})}}>dicrement
{dispatch({type:'reset'})}}>reset
)
}
```
- Example 2: I need to increment upto 5 snece we are doing in object so,...
```js
const initialState3 = {
firstCounter:0
}
const reducer3=(state,action) =>{
switch(action.type){
case 'increment':
return {firstCounter:state.firstCounter + action.value}
case 'dicrement':
return {firstCounter:state.firstCounter - action.value}
case 'reset':
return {firstCounter:initialState}
default:
return {state}
}
}
export function ComplexUseReducerTwo(){
const [count,dispatch] = useReducer(reducer3,initialState3)
return(
useReducer hooks complex
{count.firstCounter}
{dispatch({type:'increment',value:5})}}>increment 5
{dispatch({type:'dicrement',value:10})}}>dicrement 10
{dispatch({type:'reset'})}}>reset
)
}
```
- Example 3: (if there are multiple object then spread operator should must be used to rewrite otherwise you will over write everything fresh...)
```js
const initialState3 = {
firstCounter:0,
secondCount:10
}
const reducer3=(state,action) =>{
switch(action.type){
case 'increment':
return {...state,firstCounter:state.firstCounter + action.value}
case 'dicrement':
return {...state,firstCounter:state.firstCounter - action.value}
case 'increment2nd':
return {...state,secondCounter:state.secondCounter+ action.value}
case 'dicrement2nd':
return {...state,secondCounter:state.secondCounter - action.value}
case 'reset':
return {firstCounter:initialState}
default:
return {state}
}
}
//.....
```
* we can maintain both the state and action as object
- action as object we can pass more data
- state as object we can keep track all multiple start variable
* ### Multiple useReducer
* if we need 2 counter with the exact same state transitions there is much simplers alternative by using multiple useReducer, Example:
```js
const initialState = 0
const reducer=(state,action) =>{
switch(action){
case 'increment':
return state + 1
case 'dicrement':
return state - 1
case 'reset':
return initialState
default:
return state
}
}
export function SimpleUseReducer(){
const [count1,dispatch1] = useReducer(reducer,initialState)
const [count2,dispatch2] = useReducer(reducer,initialState)
return(
useReducer hooks simple
{count1} and {count2}
{dispatch1('increment')}}>increment 1
{dispatch1('dicrement')}}>dicrement 1
{dispatch1('reset')}}>reset 1
// see we can use same reducer for different part
{dispatch2('increment')}}>increment 2
{dispatch2('dicrement')}}>dicrement 2
{dispatch2('reset')}}>reset 2
)
}
```
* ### useReducer with useContext
- Step 1: Create a whole reducer
- Step 2: Create a context ```export const MyContext = React.createContext()```
- Step 3: We will pass count and our dispatch as a value in provider
```js
//...
```
- Step 4: Now where we want to use we will use these
```js
const Counter = useContext(MyCounter)
return(
{Counter.Countstate}
Counter.Countdispatch()}>
)
```
* ### useState vs useReducer
Sinario
useState
useReducer
Type of state
Number,string,boolen
object,array
number of state transition
one or 2
2 or more
related state transition
No
Yes
boolen logic
No bunnion logic
complex bunnion logic
local Vs global
local
global
* ## useCallback
* useCallback is a hook that will return a memorized version of the callback function that only changes if one of the dependencies has changed
* it is usefull when passing callback to optimized child components that reply on reference ezuality to prevent unnessary rendering
* example :
```js
function CallBackHook(){
const [skill,setskill] = useState(4)
const [salary,setSalary] = useState(20000)
const incrementSkill = useCallback(()=>{
console.log("called skill")
setskill(skill+1)
},[skill])
const incrementSalary = useCallback(()=>{
console.log("called salary")
setSalary(salary+1500)
},[salary])
return(
Skill Years +
Salary +
If your skill year is :{skill} then you may get : rs{salary} salary
)
}
//actually its spread bitween different component (this is a parent component)
```
* ## useMemo hook
* it is also closely related to useCallback hooks which will boost our performence
* example:
```js
function MemoHook(){
const [count1,setCount1] = useState(0)
const [count2,setCount2] = useState(0)
const Increment1 = () =>{
setCount1(count1+1)
}
const Increment2 = () =>{
setCount2(count2+1)
}
const isEven = useMemo(()=>{
let i = 0
while(i<2000000000) i++
return count1%2 === 0
},[count1]) // by this we will see the delay in UI
return(
our Memo hook
button 1
{isEven ? 'Even' : 'Odd'}
button 2
)
}
```
* ## useRef hook
- by the name only we can understand that we its use for refrence (Refs make possible to access DOM notes directly without react)
- Use Case 1 :
```js
function UseCaseOuseRef(){
const [userIN,setUserIN] = useState("")
const inputRef = useRef(null)
useEffect(()=>{
//focus the input
inputRef.current.focus()
},[])
return(
{setUserIN(e.target.value)}}/>
You have Typed: {userIN}
)
}
```
- Use Case 2 :
```js
function UseCaseTuseRef(){
const [timer,setTimer] = useState(0)
const intervalRef = useRef()
// it will help to make it global value
useEffect(()=>{
intervalRef.current = setInterval(()=>{
setTimer(prevTime=>prevTime+1)
},1000)
return()=>{
clearInterval(intervalRef.current)
}
},[])
return(
{timer}
clearInterval(intervalRef.current)}>Clear Interval
)
}
```
* ## Custome Hook
* a costom hook is basically a JS function whose name starts with "use"
* a custom hook can also call other hooks in required
* why? - share logic like: Alternative to HOCs & RenderProps
* lets make our own Hooks, Like Update Title: [CODE](demo/src/hookComponents/customHook.js)
[Move to TOP](#Full-Stack_JS-React)
Thanks You
License Under : [MIT LICENSE](LICENSE)