Props and State in React
Understanding the Difference Between Props and State in React
Props (properties) are data passed from parent to child components, acting as read-only configuration, while state is internal data managed within a component that can change over time, triggering re-renders.
Think of props as arguments to a function (immutable, passed down) and state as variables inside the function (mutable, local to the component). Both have different use cases and equally useful.
Props (Properties)
Source: Passed down from parent components to child components.
Mutability: Immutable (read-only for the child component).
Purpose: To configure child components and pass data between them.
Example:
<Profile name={‘Suzy’} age={‘25’} />
State
Source: Managed internally within the component.
Mutability: Mutable (can be changed by the component itself).
Purpose: To manage data that changes over time, affecting the component's rendering (e.g., counter, form input).
Example:
const [count, setCount] = useState(0);in a functional component. Herecountis name of variable andsetCountis used for changing value of count variable.
Summary
Data Flow: Props = Parent-to-child; State = Internal.
Control: Parent controls props; Component controls state.
Re-render: Changing state causes re-render; Changing props causes child re-render.
Best Practice: Use props for data flowing down and state for data that changes internally.
Note -
Use state variable when it is actually needed to avoid unnecessary re-renders. Variables which do not change that can be defined using Vanila JavaScript. React this official documentation for more info about avoiding unnecessary re-renders - https://react.dev/learn/escape-hatches
