Scribd
Upload
21 views4 pages

4 - Managing Component State

The document discusses managing component state in React, including using the state hook, keeping state minimal, updating state immutably, lifting state up, and using libraries like Immer to help update state. React expects components to be pure and strict mode helps catch impurities.

Uploaded by

farhan121921
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
21 views4 pages

4 - Managing Component State

The document discusses managing component state in React, including using the state hook, keeping state minimal, updating state immutably, lifting state up, and using libraries like Immer to help update state. React expects components to be pure and strict mode helps catch impurities.

Uploaded by

farhan121921
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

Managing Component State 1

Managing Component State


Terms
Asynchronous
Lifting state
Pure component
Strict mode

Summary
• The state hook allows us to add state to function components.

• Hooks can only be called at the top level of components.

• State variables, unlike local variables in a function, stay in memory as long as the
component is visible on the screen. This is because state is tied to the component
instance, and React will destroy the component and its state when it is removed from
the screen.

• React updates state in an asynchronous manner, so updates are not applied


immediately. Instead, they’re batched and applied at once after all event handlers have
nished execution. Once the state is updated, React re-renders our component.

• Group related state variables into an object to keep them organized.

• Avoid deeply nested state objects as they can be hard to update and maintain.

• To keep state as minimal as possible, avoid redundant state variables that can be
computed from existing variables.

• A pure function is one that always returns the same result given the same input. Pure
functions should not modify objects outside of the function.

Copyright 2023 Code with Mosh codewithmosh.com


fi
Managing Component State 2

• React expects our function components to be pure. A pure component should always
return the same JSX given the same input.

• To keep our components pure, we should avoid making changes during the render
phase.

• Strict mode helps us catch potential problems such as impure components. Starting
from React 18, it is enabled by default. It renders our components twice in development
mode to detect any potential side effects.

• When updating objects or arrays, we should treat them as immutable objects. Instead of
mutating them, we should create new objects or arrays to update the state.

• Immer is a library that can help us update objects and arrays in a more concise and
mutable way.

• To share state between components, we should lift the state up to the closest parent
component and pass it down as props to child components.

• The component that holds some state should be the one that updates it. If a child
component needs to update some state, it should notify the parent component using a
callback function passed down as a prop.

Copyright 2023 Code with Mosh codewithmosh.com


Managing Component State 3

UPDATING OBJECTS

UPDATING NESTED OBJECTS

Copyright 2023 Code with Mosh codewithmosh.com


Managing Component State 4

UPDATING ARRAYS

UPDATING ARRAY OF OBJECTS

UPDATING WITH IMMER

Copyright 2022 Code with Mosh codewithmosh.com

You might also like