Scribd
Upload
11 views4 pages

Slides

Uploaded by

fawadkhantemp
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
11 views4 pages

Slides

Uploaded by

fawadkhantemp
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

Updating Data via “State”

By default, React does “State” is data managed


not care about changes by React, where changes Child components of
of variables inside of of the data do force components where state
components. It does not React to re-evaluate (“re- changed are also re-
re-evaluate the render”) the component evaluated.
component’s JSX markup. where the data changed.
Lifting State Up

This component has access to


both involved components
Pass state data via props “Lifting the state up”
<App />
State

<Expenses /> <NewExpense />

Data/ State is Data/ State is


needed here generated here
Stateful vs Stateless Components

Stateful Components Stateless Components

React components which only


React components that
(possibly) use props, output
manage internal state
JSX and add styling.

Typically, you have only a Typically, you have plenty of


couple of these these.

Also called “smart” Also called “dumb” or


components or “containers”. “presentational” components.
An Alternative Way Of Building Components

Functional Components Class-based Components

JavaScript Functions which JavaScript classes as


return JSX blueprints for components.

React executes them for you


render() method for outputting
(initially and upon state
JSX (called by React)
changes)

Use “React Hooks” for state Historically (React <16.8), the


management only way of managing state!

You might also like