Component Reuse State

When reusing a React component, defined state in the component is independent on every instance of it being reused.

One component state does not affect another component state.

const [cards, setCards] = setState([]);

// column 1
<Column cards={cards} />

// column 2
<Column cards={cards} />

In above example, Column references the same state, so they are intertwined (as in, change in column 1 affects column 2).

// in Card.jsx (children)
export function Card() {
  const [cards, setCards] = setState([]);
  
  return (
    <>
      {cards}
    </>
  )
}

// in Page.jsx (parent)
export function Page() {
  
  return (
    // card 1
    <Card />
      
    // card 2
    <Card />
  )
}

In above example, Card 1 and Card 2 are copies of same Child component definition, but because each component is a new instantiation of the definition, the cards state in <Card /> components are independent of each other.