React Grimoire
  • ⁉️Introduction
  • 🧑‍🎓🧑🎓 React Fundamentals
    • The Basic javascript "Hello world"
    • Basic view on React core API's
    • JSX
    • React Props and styling
    • Components
    • Handling Events With React
    • Form
    • Array and Lists
    • Class Component State
    • Class Component Life Cycle
    • PropTypes
  • 🪝React Hooks
    • Intro to hooks
    • useState
    • useEffect
    • useRef
    • useContext
    • useMemo
    • useCallback
    • useReducer
    • useLayoutEffect
    • useImperativeHandle
    • Hook flow
    • Custom hooks
      • useDebugValue
    • React 18 hooks
  • 📓React Guidelines
    • React Components Composition Guidelines
    • React hooks guidelines
    • The use of Memoization
    • Lifting State Up
  • 🔭Concepts
    • Advanced Patterns
      • Compound Components Pattern
      • Control Props Pattern
      • Props Getters Pattern
      • Custom hook pattern
      • Context Module
      • State Reducer
    • React Under the hood
      • 🏁What is "Rendering"?
      • 🏁React Lifecycle
      • 🏁Reconciliation & Virtual DOM in React
      • 🏁Fiber
    • ⏰Concepts to always have in mind
  • 🧩React ecosystem
    • Forms Tools
      • React Hook Form VS Formik
    • TypeScript
      • 🏁Conditional React props with TypeScript
    • 🏁Build tool choice for MVP projects
    • A CSS methodology comparison
      • 🏁Post CSS processor :Sass
      • 🏁CSS in js :Styled-components
      • 🏁Utility Classes: Tailwind
  • ⁉️Testing
    • In Progress
  • 🎭Performance
    • in Progress
  • 🚀Deployment
    • In Progress
  • 🖼️Design system
    • 🏁What's a design system anyway ?​?
  • 🔗Us-full links
    • Typescript and React basic tutorial
    • React-philosophies
    • React new doc
Powered by GitBook
On this page
  • The state sharing problem
  • Solution: Lifting State Up
  • References and articles :

Was this helpful?

Edit on GitHub
  1. React Guidelines

Lifting State Up

PreviousThe use of MemoizationNextAdvanced Patterns

Last updated 2 years ago

Was this helpful?

The state sharing problem

In some cases, it may be interesting to communicate or synchronize the state of a component with another component which is not a descendant of this first component (the set of components forms a graph). They can be for example at the same level of hierarchy in the component tree.

In React, the primary way to communicate data from one component to another is through the properties of those subcomponents. We thus speak of Top-Down or Unidirectional Data Flow .

As a reminder, it is not possible to modify its own properties. Moreover, the State is local to the component. We can obviously communicate the State in properties of its sub-components but once again it is a Top-Down approach.

Solution: Lifting State Up

In order to solve this problem, the approach is to communicate the state of the components to their closest common ancestor. We then speak of Lifting State Up (raising the state).

It suffices for this that a component gives in properties to the descending component a callback function so that the latter can go up its state.

References and articles :

📓
Lifting State Up – React
Application State Management with Reactkentcdodds
Prop Drillingkentcdodds
Colocationkentcdodds
State Colocation will make your React app fasterkentcdodds
State Colocation will make your React app fasterkentcdodds
3 Rules of React State ManagementDmitri Pavlutin Blog
Logo
React.js "Lifting State Up" Explained | HackerNoonhackernoon
Logo
Logo
Logo
Logo
Logo
Logo
Logo