React: What are the best practices for working with props in React?

1// Bad
2function UserCard(props) {
3  return <div>{props.name}</div>;
4}
5
6// Good
7function UserCard({ name, age, avatar }) {
8  return <div>{name}</div>;
9}

1// Destructuring with defaults (preferred)
2function Button({ variant = "primary", size = "md", children }) {
3  return <button className={`btn btn-${variant} btn-${size}`}>{children}</button>;
4}
5
6// defaultProps — outdated method
7Button.defaultProps = { variant: "primary" };

1interface UserCardProps {
2  name: string;
3  age: number;
4  avatar?: string;  // Optional
5  onEdit?: (id: number) => void;  // Optional callback
6}
7
8function UserCard({ name, age, avatar, onEdit }: UserCardProps) { /* ... */ }

1// Bad: passing through 5 levels
2function App() {
3  return <Layout theme={theme} />;
4}
5function Layout({ theme }) { return <Sidebar theme={theme} />; }
6function Sidebar({ theme }) { return <Menu theme={theme} />; }
7
8// Good: Context
9const ThemeContext = createContext("light");
10function Menu() { const theme = useContext(ThemeContext); /* ... */ }

1// Good: for passing props to DOM element
2function Button({ children, ...props }) {
3  return <button {...props}>{children}</button>;
4}
5
6// Bad: loses typing and control
7function UserCard({ ...props }) { return <div {...props} />; }

1// Bad: creates new reference every render
2<UserCard style={{ color: "red" }} />
3
4// Good: stable reference
5const style = useMemo(() => ({ color: "red" }), []);
6<UserCard style={style} />

1function Card({ title, children }) {
2  return (
3    <div className="card">
4      <h2>{title}</h2>
5      <div className="card-body">{children}</div>
6    </div>
7  );
8}
9
10<Card title="Profile">
11  <UserInfo user={user} />
12</Card>