What is lifting state up in React?
Answer
Lifting state up is the pattern of moving shared state to the closest common ancestor of the components that need it, then passing it down via props. When two sibling components need to share and synchronize state, neither can access the other's state directly. Instead: (1) Remove the state from both child components. (2) Add it to their common parent. (3) Pass the state and state-setter functions down as props. Example: a temperature converter where Celsius and Fahrenheit inputs must stay in sync — lift the temperature value into the parent that contains both inputs. The parent owns the truth; both children are controlled by it. This is React's single-source-of-truth principle — state lives in one place, and all dependent components derive their values from it. Lifting state can cause more prop drilling — if it becomes excessive, consider Context or an external state manager. Always start by lifting to the closest common ancestor, not immediately jumping to global state.