Best Practices for Props and State

✅ Best Practices for Props and State in React

In React, props and state are the two main tools used to control dynamic behavior and flow of data. They help you build reusable, modular, and interactive components. But misusing them can make your code messy, buggy, or hard to maintain.

In this blog, we’ll go through essential best practices for handling props and state in your React components so you can keep your apps clean, scalable, and efficient. 💡

📥 Keep Props Read-Only

Props are meant to be passed down from parent to child. They should never be modified inside the child component. Instead, use callbacks if the child needs to "inform" the parent about something.

// ❌ Never do this
props.username = "NewUser"; 

// ✅ Do this instead
const Greeting = ({ username }) => (
  <h2>Hello, {username}!</h2>
);

🚨 Tip: Always treat props as immutable!

🔁 Use State for Interactivity

State is for data that changes over time within a component — form inputs, toggles, counters, etc.

const Counter = () => {
  const [count, setCount] = useState(0);

  return (
    <button onClick={() => setCount(count + 1)}>
      Count: {count}
    </button>
  );
};

Only use state for things that will trigger a UI update when changed.

📍 Keep State Minimal

Don't store derived or unnecessary data in state. If something can be calculated from props or existing state, you don’t need to store it separately.

// ❌ Redundant state
const [fullName, setFullName] = useState(firstName + " " + lastName);

// ✅ Derive when needed
const fullName = firstName + " " + lastName;

This avoids synchronization issues and reduces bugs.

🧩 Lift State When Necessary

When two sibling components need the same data, move the state to their closest common ancestor and pass it down as props.

const Parent = () => {
  const [text, setText] = useState("");

  return (
    <>
      <Input value={text} onChange={setText} />
      <Preview value={text} />
    </>
  );
};

This is known as lifting state up — it keeps your data in sync and your logic centralized.

🔄 Use Callbacks to Modify Parent State

If a child component needs to trigger a change in the parent’s state, pass down a callback from the parent.

const Parent = () => {
  const [name, setName] = useState("");

  return <Child onNameChange={setName} />;
};

const Child = ({ onNameChange }) => (
  <input onChange={(e) => onNameChange(e.target.value)} />
);

This keeps your app logic predictable and manageable.

🔒 Use PropTypes or TypeScript

To validate the props being passed, use PropTypes or better — switch to TypeScript for type safety.

import PropTypes from 'prop-types';

const Profile = ({ name, age }) => (
  <p>{name} - {age}</p>
);

Profile.propTypes = {
  name: PropTypes.string.isRequired,
  age: PropTypes.number
};

This helps catch bugs during development and improves code clarity.

🔁 Avoid Prop Drilling (Use Context)

When you're passing props through multiple nested components just to get data to a deeply nested child, it’s a sign to use the Context API.

Instead of:

<App user="John">
  <Layout>
    <Sidebar>
      <Profile user="John" />
    </Sidebar>
  </Layout>
</App>

Use:

const UserContext = React.createContext();

const App = () => {
  return (
    <UserContext.Provider value="John">
      <Layout />
    </UserContext.Provider>
  );
};

const Profile = () => {
  const user = useContext(UserContext);
  return <p>Hello, {user}!</p>;
};

🧠 Recap: Smart Usage of Props and State

• 🧩 Props: For passing data down — never modify them
• 🔁 State: For internal, interactive data — always manage immutably
• 📤 Lift state to a common parent when multiple components need it
• 🧼 Keep state minimal and derive when possible
• 🛡️ Use validation with PropTypes or TypeScript

Mastering props and state is the first step to mastering React. Use them wisely, and your components will be simple, predictable, and a joy to work with.

🚀 What's Next?

• Dive into Context API for global state
• Learn useReducer for advanced state handling
• Explore form handling with controlled components

Props and state are the foundation — once you’re confident here, the rest of React becomes much easier to build on. 🔧