# React Props and React State — A Complete Guide (2025) --- ### Introduction React’s strength lies in how it manages **data flow** inside applications. Whether you’re building small components or large-scale apps, understanding **props** and **state** is crucial. These two core concepts define how data is passed, updated, and rendered in the React ecosystem. Since 2022, React has evolved with **React 18 features, hooks, context improvements, and server components**, making it even more important to revisit how we use props and state in modern development. This guide explains what they are, how they differ, and the best practices every developer should follow in 2025. --- ## What Are Props and State? ### Props (Properties) - Inputs passed **from parent to child** components. - Immutable (read-only inside the child). - Used for **configuration, rendering data, and communication**. - Examples: `title`, `user`, `onClick` callbacks. ### State - Data that a component **owns and controls**. - Mutable, updated with hooks like `useState` or `useReducer`. - Used for **interactive behavior**: toggles, forms, fetching data, UI updates. - Example: form field values, modal open/close status, or a counter. --- ## Props vs. State: Key Differences | Aspect | Props | State | |--------------------|-----------------------------------------|---------------------------------| | Ownership | Passed down from parent | Maintained inside the component | | Mutability | Read-only | Can be updated with hooks | | Purpose | Configure components, pass data & logic | Track and manage local changes | | Updates trigger | Re-renders when parent re-renders | Re-renders when state changes | --- ## Modern React: Updated Usage ### Hooks for State Instead of `this.setState` (class components), modern React uses hooks: ```jsx import { useState } from "react"; function Counter() { const [count, setCount] = useState(0); return (

You clicked {count} times

); } ``` ### Context API for Prop-Drilling Problems Avoid passing props through multiple layers with **Context**: ```jsx import { createContext, useContext } from "react"; const ThemeContext = createContext("light"); function App() { return ( ); } function Toolbar() { const theme = useContext(ThemeContext); return ; } ``` ### React 18+ Improvements - **Automatic Batching**: multiple state updates are batched for performance. - **Transitions**: smoother UI updates for concurrent rendering. - **Server Components**: some props/state considerations shift to hybrid rendering. --- ## Best Practices (2025 Edition) 1. **Keep state minimal** — store only what you can’t derive from props or other state. 2. **Lift state up** only when multiple children need access. 3. **Use context or global stores** (Redux Toolkit, Zustand, Recoil) when sharing complex state. 4. **Validate props** with **PropTypes** or, ideally, TypeScript. 5. **Avoid unnecessary re-renders** — use `React.memo`, `useCallback`, and `useMemo`. 6. **Immutable updates only** — don’t mutate arrays/objects directly. 7. **Secure side effects** — always clean up with `useEffect` where necessary. --- ## Example: Combining Props, State, and Context ```jsx import React, { useState, useCallback, createContext, useContext } from "react"; import PropTypes from "prop-types"; const ThemeContext = createContext(); function App() { const [count, setCount] = useState(0); const increment = useCallback(() => setCount(c => c + 1), []); return ( ); } function Counter({ count, onIncrement }) { const theme = useContext(ThemeContext); return (

You clicked {count} times

); } Counter.propTypes = { count: PropTypes.number.isRequired, onIncrement: PropTypes.func.isRequired, }; export default App; ``` --- ## Conclusion Props and state are the **cornerstones of React development**, but the ecosystem around them keeps evolving. By combining them with hooks, context, and new React 18 features, you’ll build applications that are both **performant** and **scalable**. Mastering these fundamentals ensures you can confidently step into more advanced React patterns—like server components, global state management, and performance optimization. Stay curious, practice often, and keep your React skills up to date! 🚀 ---

#state

React الخصائص و React الحالة — دليل شامل (2025)