From f05a472585b2506da21aed71f0252b2d4c04a221 Mon Sep 17 00:00:00 2001 From: Indrajith K L Date: Mon, 5 Feb 2024 04:15:02 +0530 Subject: React Slides * Adds useState * State * useEffect * Side Effects --- src/slides.svelte | 276 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 276 insertions(+) create mode 100644 src/slides.svelte (limited to 'src/slides.svelte') diff --git a/src/slides.svelte b/src/slides.svelte new file mode 100644 index 0000000..64166a8 --- /dev/null +++ b/src/slides.svelte @@ -0,0 +1,276 @@ + + + + +

React Builtin Hooks

+
+ + + +

React Builtin Hooks

+ +
+ +

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()

+ +
    +
  • + useState hooks allows to have state variable inside a FUNCTIONAL COMPONENT +
  • +
  • + useState ENCAPSULATES only a single value +
  • +
  • + For mulatiple values you may need to call multiple useState's +
  • +
  • + useState arguments +
      +
    • + Initialization of a state variable +
    • +
    • + Passing function as initial value - to calculate an initial value +
    • +
    +
  • +
  • + Managing multiple states +
      +
    • + Multi-variable's +
    • +
    • + Object as value +
    • +
    +
  • +
+
+
+ +

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. +
  • +
+
+
+
-- cgit v1.2.3