incrementCount
when the button is clicked. See the full list of React listener attributes here: https://reactjs.org/docs/events.html#supported-events.incrementCount
inside the component function Counter
. We would not typically define a function inside a function in JS, but this is standard convention in React functional components.count
variable value on line 16. Clicking the button triggers incrementCount
, and the value of count
changes, but its value on screen never does.useState
this.state
that is an object that stores the local state for that component. When properties in this.state
change, the JSX that depends on those properties gets re-rendered.this.state
is replaced by what is known as "hooks". Hooks are the more modern React system for DOM manipulation, replacing both this.state
and what were known as "component lifecycle methods" that we will learn about in Module 8: Advanced React. The React team launched hooks in Feb 2019, thus many companies that used React before 2019 still rely on class components.useState
is a React function that returns an array with 2 elements.X
setX
, where X
is the variable name from #1.useState
takes 1 input, the initial state value. In the example below count
begins as 0
.count
gets updated when we press the button!console.log
on line 14 runs every time the counter gets updatedsetCount
, React takes the value and calls the component function again, where count
in the re-rendered component is the new value, but count
in the original component is still the old value. The variable count
and hook function setCount
are related from when we first created them with useState
. The subsequently called component function renders JSX with the new value and React puts it on screen.document.getElementById('count')
to get the element that displays the count, and setting that element's text value to the new count.count
state changes. This makes our lives easier as developers because we no longer need to manually manage state; React manages it automatically for us.count
state and re-renders Counter
component with new value of count
.Fahrenheit
console.log
happens when count
changes. To avoid this for performance reasons, we might move BigWord
and Fahrenheit
components up inside the App
component so that they are not re-rendered every time count
changes in Counter
.debugger
statement on line 12. This will pause execution of the JavaScript at that line- this makes it clear that after the setCount
function call, the browser screen has not been updated yet.count
. It has also not changed. Calling the set state function does not set the count state variable. This value changes after the function ends.