function Button() {
  return <button>Click me!</button>;
}

function UserListContainer() {
  const users = ["Alice", "Bob", "Charlie"];
  return <UserList users={users} />;
}

function UserList({ users }) {
  return (
    <ul>
      {users.map((user) => (
        <li>{user}</li>
      ))}
    </ul>
  );
}

const UserContext = React.createContext();

function App() {
  const user = "Alice";
  return (
    <UserContext.Provider value={user}>
      <Profile />
    </UserContext.Provider>
  );
}

function Profile() {
  const user = React.useContext(UserContext);
  return <h1>Hello, {user}!</h1>;
}

const FastComponent = React.memo(() => {
  return <div>This won’t redraw unless it needs to!</div>;
});

import { render, screen } from '@testing-library/react';

test('shows button', () => {
  render(<Button label="Click me" />);
  expect(screen.getByText('Click me')).toBeInTheDocument();
});

function AccessibleButton() {
  return <button aria-label="Send message">Send</button>;
}