Learn ReactJS Props and State

React leverages props and state to manage data flow in components. Use props when passing configuration that remains static, and state for managing data that evolves during the component's lifecycle. This tutorial dives into their differences, usage scenarios, and best practices.

Key Takeaways

• Props are for passing immutable data to components.
• State enables dynamic data changes within a component.
• Props are set externally; state is managed internally.
• Always propagate state changes downwards via props.

What are props?

Props is short for "properties", which carry data into components. Props are immutable and set by the parent component. Here's a basic example:

import React from 'react';

function Header(props) {
  return 
Welcome back, {props.firstName}
;
}

function App() {
  return (
    

      

    
  );
}

export default App;

Here, we pass a firstName prop to the <Header /> component, which uses it to display a greeting.

What is state?

State is used internally by components and can be modified with the useState hook to trigger a re-render when the state changes:

import React, { useState } from 'react';

function App() {
  const [firstName, setFirstName] = useState('Eric');

  const updateFirstName = () => setFirstName('Fred');

  return (
    

      

      Update name
    
  );
}

function Header({ firstName }) {
  return 
Welcome back, {firstName}
;
}

export default App;

This example defines a state variable firstName. Upon clicking the button, setFirstName updates the state, which causes React to re-render the component with the new name.

The difference between state and props

Both state and props can pass data to child components yet they serve distinct roles:

Immutability

Props are immutable, serving as static configuration values a component customizes through reading, not writing. On the flip side, state is local and mutable, allowing components to manage and respond to internal changes:

import React, { useState } from 'react';

Notice how setFirstName allows us to dynamically update state, rerendering the React component to reflect changes immediately.

Validation

You can validate props using prop-types, ensuring type safety and preventing runtime bugs:

import PropTypes from 'prop-types';

Header.propTypes = {
  firstName: PropTypes.string
};

This code snippet enforces that firstName should be of type string, helping catch errors during development.

Accessibility

You define props externally and manage state internally. A component can receive a function as a prop to update a parent's state:

function Header({ firstName, updateName }) {
  return (
    

      
Welcome back, {firstName}
      Update name!
    
  );
}

function App() {
  const [firstName, setFirstName] = useState('Eric');

  const updateState = () => setFirstName('Fred');

  return 
;
}

The Header component can interact with the updateState function through updateName prop, reflecting controlled parent-to-child and back communication.

When to use state vs props

Minimize "stateful" components and let props guide data flow. Defining state near the root and propagating changes downwards simplifies maintenance and testing by maintaining a consistent data flow.

Conclusion

Both props and state orchestrate data flow in React. While props move data immutably into components, state dynamically governs internal changes with a cohesive, unidirectional flow.

FAQ

Should I always use hooks for state?

Yes, with functional components being the norm, hooks like useState are preferred for managing state in React as of 2026.

Can props be changed inside the component?

No, props are immutable and intended to be read-only within the component.

What happens when a state change occurs?

When a state change occurs, React triggers a re-render of the component to reflect the updated data immediately.