diff --git a/src/notes/state.notes.svelte b/src/notes/state.notes.svelte
new file mode 100644
index 0000000..bde0f65
--- /dev/null
+++ b/src/notes/state.notes.svelte
@@ -0,0 +1,38 @@
+
+
+
+ -
+ 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
+
+
+
+
+
\ No newline at end of file
diff --git a/src/slides.svelte b/src/slides.svelte
index 64166a8..c4a3d70 100644
--- a/src/slides.svelte
+++ b/src/slides.svelte
@@ -9,6 +9,7 @@
Code
} from '@components'
import { signal } from '@motion'
+ import StateNotes from "./notes/state.notes.svelte"
const circle = signal(
{ x: 0, y: 200, r: 80, fill: '#00ffff' },
@@ -83,41 +84,49 @@
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
-
-
-
-
-
+
+
+ {`
+ 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