How to share state between components in React

import { useState, createContext, useContext } from 'react'

// Method 1: Lifting State Up
function App() {
  const [sharedData, setSharedData] = useState({ count: 0, user: null })

  return (
    <div>
      <Header user={sharedData.user} />
      <Counter
        count={sharedData.count}
        onUpdate={(count) => setSharedData(prev => ({ ...prev, count }))}
      />
      <UserProfile
        user={sharedData.user}
        onUserChange={(user) => setSharedData(prev => ({ ...prev, user }))}
      />
    </div>
  )
}

// Method 2: Context API for Complex State
const AppStateContext = createContext()

function AppStateProvider({ children }) {
  const [state, setState] = useState({
    user: null,
    theme: 'light',
    notifications: []
  })

  const updateUser = (user) => {
    setState(prev => ({ ...prev, user }))
  }

  const addNotification = (notification) => {
    setState(prev => ({
      ...prev,
      notifications: [...prev.notifications, notification]
    }))
  }

  return (
    <AppStateContext.Provider value={{ state, updateUser, addNotification }}>
      {children}
    </AppStateContext.Provider>
  )
}

// Custom hook for consuming context
function useAppState() {
  const context = useContext(AppStateContext)
  if (!context) {
    throw new Error('useAppState must be used within AppStateProvider')
  }
  return context
}

// Using shared state in components
function UserComponent() {
  const { state, updateUser } = useAppState()

  return (
    <div>
      <p>User: {state.user?.name || 'Not logged in'}</p>
      <button onClick={() => updateUser({ name: 'John Doe' })}>
        Login
      </button>
    </div>
  )
}