User Interaction & State
Making Apps Interactive & Reactive
Handling Events
Updating the UI & Working with “State”
A Closer Look At Components & State
Updating Data via “State”
!
Z
Z
Z
By default, React does not care “State” is data managed by
about changes of variables React, where changes of the
Child components of
inside of components. data do force React to re-
components where state
evaluate (“re-render”) the
changed are also re-evaluated.
It does not re-evaluate the component where the data
components’s JSX markup. changed.
Lifting State Up
This component has access
to both components
State
Pass state data via props “Lifting the state up”
<App />
<Expenses /> <NewExpense />
Data / State is (also) Data / State is generated
needed here or changed here
Stateful vs Stateless Components
Stateful Components Stateless Components
React components that manage React components which only use
internal state props and output JSX
Typically, you have only a couple
Typically, you have plenty of these
of these
Also called “smart” components or Also called “dumb” or
“containers” “presentational” components
Alternative Way Of Building Components
Functional Components Class-based Components
JavaScript functions which return JavaScript classes as blueprints
JSX code for components
React executes them for you render() method for outputting
(initially & upon state changes) JSX (called by React)
Use “React Hooks” for state Historically (React < 16.8), the only
management way of managing state!