Scribd
Upload
12 views

4slides - React Complete Guide Code 04 React State Events

The document discusses user interaction and state in React applications. It covers topics like handling events, updating the UI by working with state, lifting state up to parent components, and the differences between stateful and stateless components.

Uploaded by

surendrakakinada
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
12 views

4slides - React Complete Guide Code 04 React State Events

The document discusses user interaction and state in React applications. It covers topics like handling events, updating the UI by working with state, lifting state up to parent components, and the differences between stateful and stateless components.

Uploaded by

surendrakakinada
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 5

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!

You might also like