Effectively using local states

There are some patterns you should know to be able to use a local state effectively. In this section, we will learn how to lift states up, which means defining a state higher in the component tree, and lifting content up, which means defining a content higher in the component tree.

Lifting state up

Let's suppose we have two counter components, as follows:

const Component1 = () => {
  const [count, setCount] = useState(0);
  return (
    <div>
      {count}
      <button onClick={() => setCount((c) => c + 1)}>
        Increment Count
      </button>
    </div>
  );
};
const Component2 = () => {
  const [count, setCount] = useState(0);
  return (
    <div>
 ...