React Builtin Hooks

useState()

useEffect()

useContext()

useReducer()

useRef()

useMemo()

useCallback()

What is a State?

State is something which holds the info or details about a Component's State at a TIME
It can change over time.
Whenever the state changes the COMPONENT attached to it re-renders

useState()


				{`
				import React, {useState} from 'react';

				const [value, setValue] = useState(null);
				`}

useState()


				{`
					import React, {useState} from 'react';
				
					const [value, setValue] = useState({
						id: 12,
						name: "YouName"
					})
				`}

useState()


				{`
				import React, {useState} from 'react';

				function calculateValue() {
					return Math.sqrt(64);
				}

				const [value, setValue] = useState(calculateValue());
				`}

Side Effects

Something which is outside the scope of REACT
- Calling AJAX requests
- Calling Web API stuffs (document.get...)
- localStorage etc...
- setTimeout, setInterval
Everything which is not part of React Library
Fun Fact - What happens if you call setTimeout without any arguments
- Executes outside the execution queue

useEffect


				{`
				useEffect(() => {
					document.title = "Hey There, I'm from useEffect"
				})
				`}

useEffect


				{`
				useEffect(() => {
					document.title = "Hey There, I'm from useEffect"
				}) ← No Arguments means this will be called each time 
				     this component re-renders
				`}

useEffect


				{`
				useEffect(() => {
					document.title = "Hey There, I'm from useEffect"
				}, []) ← An empty array as an argument will run the 
				       effect once the component is mounted
				`}

useEffect


				{`
				useEffect(() => {
					document.title = "Hey There, I'm from useEffect"
				}, [prop1]) ← We can pass value
				`}

useEffect


				{`
				useEffect(() => {
					document.title = "Hey There, I'm from useEffect"
				}, [prop1, state1]) ← Actually we can pass multiple-values
				`}

useEffect


				{`
				useEffect(() => {
					document.title = "Hey There, I'm from useEffect"
				}, [prop1, state1]) ← This is called dependency list
				`}

useEffect


				{`
				useEffect(() => {
					document.title = "Hey There, I'm from useEffect"
				}, [prop1, state1]) ← Effect will run whenever any
										of the values on dependency list changes
				`}

useEffect


				{`
				useEffect(() => {
					document.title = "Hey There, I'm from useEffect";

					return () => {
						// Clean Up function 🧹
					}
				}, [prop1, state1]);
				`}

You can do removeListeners, unsubscribes, reset layouts etc
This will be called by default when component unmouts.

useContext


				{`
				import { createContext, useContext, useState } from 'react';

				const AppContext = createContext(null);
				`}

useContext


				{`
				import React, { createContext, useContext, useState } from 'react';

				export const AppContext = createContext(null);

				export default function MyApp() {
					const [someState, setSomeState] = useState('hello');
					return (
						<>
						
							
						
						
						
					)
				}
				`}

useContext


				{`
				import React, { useContext, useState } from 'react';
				
				import {AppContext} from "./MyApp";

				export default function MyComponent() {
					const appContext = useContext(AppContext)
					return (
						{appContext}
					)
				}
				`}

useContext


				{`
				import React, { useContext, useState } from 'react';
				
				import {AppContext} from "./MyApp";

				export default function MyComponent() {
					const appContext = useContext(AppContext)
					return (
						{appContext}
					)
				}
				`}

useReducer


				{`
				import {useReducer} from "react";

				function myReducer(state, action) {
					if(action.type === "on") {
						return {
							data: "Switch on"
						}
					} else if(action.type === "of") {
						return {
							data: "Switch Off"
						}
					}
				}

				export function MyComponent(props) {
					const [state, dispatch] = useReducer(myReducer, {});

					function onSwitchToggle(status) {
						dispatch({
							type: status
						})
					}

					return(
						
							
							
						
					)

				}
				`}

useReducer


				{`
				import {useReducer} from "react";

				function myReducer(state, action) {
					if(action.type === "on") {
						return {
							data: "Switch on"
						}
					} else if(action.type === "of") {
						return {
							data: "Switch Off"
						}
					}
				}

				export function MyComponent(props) {
					const [state, dispatch] = useReducer(myReducer, {});

					function onSwitchToggle(status) {
						dispatch({
							type: status
						})
					}

					return(
						
							
							
						
					)

				}
				`}

useReducer


				{`
				import {useReducer} from "react";

				function myReducer(state, action) {
					if(action.type === "on") {
						return {
							data: "Switch on"
						}
					} else if(action.type === "of") {
						return {
							data: "Switch Off"
						}
					}
				}

				export function MyComponent(props) {
					const [state, dispatch] = useReducer(myReducer, {});

					function onSwitchToggle(status) {
						dispatch({
							type: status
						})
					}

					return(
						
							
							
						
					)

				}
				`}

useReducer


				{`
				import {useReducer} from "react";

				function myReducer(state, action) {
					if(action.type === "on") {
						return {
							data: "Switch on"
						}
					} else if(action.type === "of") {
						return {
							data: "Switch Off"
						}
					}
				}

				export function MyComponent(props) {
					const [state, dispatch] = useReducer(myReducer, {});

					function onSwitchToggle(status) {
						dispatch({
							type: status
						})
					}

					return(
						
							
							
						
					)

				}
				`}

useReducer


				{`
				import {useReducer} from "react";

				function myReducer(state, action) {
					if(action.type === "on") {
						return {
							...state,
							data: "Switch on",
						}
					} else if(action.type === "of") {
						return {
							...state,
							data: "Switch Off"
						}
					}
				}

				export function MyComponent(props) {
					const [state, dispatch] = useReducer(myReducer, {});

					function onSwitchToggle(status) {
						dispatch({
							type: status
						})
					}

					return(
						
							
							
						
					)

				}
				`}

useReducer


				{`
				import {useReducer} from "react";

				function myReducer(state, action) {
					if(action.type === "on") {
						return {
							...state,
							data: "Switch on",
						}
					} else if(action.type === "of") {
						return {
							...state,
							data: "Switch Off"
						}
					}
				}

				export function MyComponent(props) {
					const [state, dispatch] = useReducer(myReducer, {});

					function onSwitchToggle(status) {
						dispatch({
							type: status
						})
					}

					return(
						
							
							
						
					)

				}
				`}