React Props

What Are Props?

Props (short for “properties”) are inputs to React components. They work just like function parameters: you pass them when using a component, and they help you customize what the component displays.

What Props do?

1. They are like function arguments in React
2. They are used to pass data from a parent component to a child component.
3. Props are read-only, meaning the child component can use them but cannot change them.

Some predefined Props in react

Some built-in props/attributes are className, id, style, value, htmlFor, src , alt etc.

Passing Props to Components

You pass props to a child component using attributes, much like you would with standard HTML tags. The parent component defines the data, and the child component receives it.

// Button.jsx
export default function Button({ label }) {
  return <button>{label}</button>
}

// App.jsx
import Button from "./Button";

export default function App() {
  return (
    <div>
      <Button label="Login" />
      <Button label="Signup" />
    </div>
  );
}

Passing Functions as Props

A common pattern is to pass callback functions from parent to child so the child can notify the parent about events (for example, when a form is submitted). This keeps data flow unidirectional while allowing interactive behavior.

// Parent.jsx
function Parent() {
  function handleLogin(username) {
    // perform login or update state
    console.log('login', username);
  }

  return <LoginForm onLogin={handleLogin} />
}

// LoginForm.jsx
function LoginForm({ onLogin }) {
  return <button onClick={() => onLogin('Avi')}>Log in</button>
}

Prefer small, focused callbacks like onSubmit or onChange. They make components easier to test and reuse.

Accessing Props in a Component

Inside a function component, props are passed as the first argument—an object containing all the properties sent from the parent. You can access individual props using dot notation (e.g., `props.name`).

function Greeting(props) {
  return <h2>Hello, {props.name}!</h2>
}

export default function App() {
  return <Greeting name="Avi" />
}

Using Destructuring

To make your code cleaner and more readable, you can use object destructuring to unpack props directly in the component's parameter list. This avoids repeating `props.` everywhere.

function Greeting({name,city}) {
  return <h2>Hello {name} from {city}</h2>
}

export default function App() {
  return <Greeting name="Avi" city="noida" />
}

default value

You can provide a default value for a prop to prevent errors or unexpected behavior when a parent component doesn't pass it. This is easily done using JavaScript's default parameters during destructuring.

This ensures your component remains stable even if some props are omitted.

function Greeting({name="guest",city="world"}) {
  return <h2>Hello {name} from {city}</h2>
}

export default function App() {
  return (
    <>
      <Greeting />
      <Greeting name="Avi" city="noida" />
    </>
    )
}
 

Children and Component Composition

React's children prop and composition model let you build flexible components by passing other components or markup as children. This often results in simpler APIs than many boolean flags.

function Card({children}) {
  return <div className="card">{children}</div>
}

// usage
<Card><h2>Title</h2><p>Body</p></Card>

Use composition to keep components small and focused. Prefer composition over prop-heavy APIs when possible.

Prop drilling and alternatives

When you pass props through many layers of components that do not use them, the code becomes noisy — this is called prop drilling. Options to reduce drilling include the React Context API, colocating state closer to the consumers, or using small state libraries for shared data.

Start simple: if only a couple of components need the data, lift state to the nearest common ancestor. Add Context API or a state library when the pattern repeats across the app.

Consider using useContext hook for easier context consumption.

Prop validation and TypeScript

For runtime validation you can use prop-types, but for stronger guarantees and developer experience prefer TypeScript: it checks prop shapes at compile time and prevents many bugs early.

// Example (PropTypes)
import PropTypes from 'prop-types';

Greeting.propTypes = {
  name: PropTypes.string,
  city: PropTypes.string,
};

Performance tips

1. Avoid passing new inline objects or functions as props if they cause unnecessary re-renders; use useCallback or useMemo when appropriate.
2. Keep props small and stable to help React's rendering optimizations.
3. Use keys correctly in lists to avoid DOM churn.

Measure with React DevTools Profiler before adding memoization; premature optimization can make code harder to maintain.

Props in Next.js

In Next.js, props work just as they do in standard React. Additionally, Next.js pages (which are also React components) receive special props from the framework, such as `params` for dynamic routes and `searchParams` for URL query strings.

// app/home.jsx

export default function HomePage({ params }) {
    return <h1>Welcome {user} !</h1>
}

Quick FAQ

Q: Can a child change props?
A: No — props are read-only; the parent should change them or provide a callback.

Q: When should I use Context?
A: Use Context for values that many components need (theme, auth). Avoid using it for frequently changing values that cause many re-renders.