Lifting state up is a pattern in React where you move the state from a lower-level component to a higher-level component in the component tree. This pattern is often used when multiple components need access to the same piece of state or when you want to share state and behavior between components.
Why Lifting State Up?
Lifting state up allows multiple child components to share the same state. If two or more components need to reflect the same data, that data's state should be lifted up to their nearest common ancestor.
If a component deep in the tree needs access to some state that's deep down in another branch of the component tree, you would have to pass the state down through several levels of components. Lifting state up helps avoid this prop drilling problem.