|
2 | 2 | Re-implementation of React |
3 | 3 |
|
4 | 4 | >The point of using a framework is to abstract away the manipulation of the DOM, so we want to avoid accessing the DOM. Any piece of information that’s relevant to the application should be part of the state. |
5 | | -
|
6 | | -Part 2 |
7 | | -Having the entire application’s state confined |
8 | | -to a single object managed by the application isn’t the most practical approach. |
9 | | -Wouldn’t it be more efficient if each component could take charge of its own |
10 | | -piece of the state, focusing solely on the view it oversees? |
11 | | - |
12 | | -> Stateful components |
13 | | -
|
14 | | -A stateful component can’t be a pure function anymore because the output of pure functions depends |
15 | | -exclusively on their arguments; hence, they can’t maintain state |
16 | | - |
17 | | -A stateful component maintains its own state. Stateful components |
18 | | -can be instantiated, with each instance having a separate state and lifecycle. A |
19 | | -stateful component updates its view when its state changes. |
20 | | - |
21 | | -The **useState()** hook, used to maintain state inside a functional component, has |
22 | | -side effects. In this context, a side effect occurs when a function modifies something |
23 | | -outside its scope. In this case, useState() is clearly storing the component’s state |
24 | | -somewhere; thus, the component function where it’s used can’t be a pure function. |
25 | | -A pure function is deterministic: given the same input, it always returns the same output and doesn’t have any side effects. But you clearly don’t get the same result every |
26 | | -time you call the component’s function because some state is maintained somewhere, and based on that state, the component returns a different virtual DOM. |
27 | | -When you use the useState() hook, React stores the state of that component inside |
28 | | -an array at application level. By keeping track of the position of the state of each component, React can update the state of the component when you call the setState() |
29 | | -method and get you the correct value when you ask for it. |
30 | | - |
0 commit comments