You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: src/content/1/en/part1c.md
+4-4Lines changed: 4 additions & 4 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -484,7 +484,7 @@ What's going on? An event handler is supposed to be either a <i>function</i> or
484
484
```
485
485
486
486
the event handler is actually a <i>function call</i>. In many situations this is ok, but not in this particular situation. In the beginning, the value of the <i>counter</i> variable is 0. When React renders the component for the first time, it executes the function call <em>setCounter(0+1)</em>, and changes the value of the component's state to 1.
487
-
This will cause the component to be re-rendered, React will execute the setCounter function call again, and the state will change leading to another rerender...
487
+
This will cause the component to be re-rendered, React will execute the setCounter function call again, and the state will change leading to another re-render...
488
488
489
489
Let's define the event handlers like we did before:
490
490
@@ -632,17 +632,17 @@ The event handler is passed to the <i>Button</i> component through the _onClick_
632
632
React's own official [tutorial](https://react.dev/learn/tutorial-tic-tac-toe) suggests:
633
633
"In React, it’s conventional to use onSomething names for props which take functions which handle events and handleSomething for the actual function definitions which handle those events."
634
634
635
-
### Changes in state cause rerendering
635
+
### Changes in state cause re-rendering
636
636
637
637
Let's go over the main principles of how an application works once more.
638
638
639
639
When the application starts, the code in _App_ is executed. This code uses a [useState](https://react.dev/reference/react/useState) hook to create the application state, setting an initial value of the variable _counter_.
640
640
This component contains the _Display_ component - which displays the counter's value, 0 - and three _Button_ components. The buttons all have event handlers, which are used to change the state of the counter.
641
641
642
642
When one of the buttons is clicked, the event handler is executed. The event handler changes the state of the _App_ component with the _setCounter_ function.
643
-
**Calling a function that changes the state causes the component to rerender.**
643
+
**Calling a function that changes the state causes the component to re-render.**
644
644
645
-
So, if a user clicks the <i>plus</i> button, the button's event handler changes the value of _counter_ to 1, and the _App_ component is rerendered.
645
+
So, if a user clicks the <i>plus</i> button, the button's event handler changes the value of _counter_ to 1, and the _App_ component is re-rendered.
646
646
This causes its subcomponents _Display_ and _Button_ to also be re-rendered.
647
647
_Display_ receives the new value of the counter, 1, as props. The _Button_ components receive event handlers which can be used to change the state of the counter.
0 commit comments