• PHP Training
    •  
  • Login/Register

    • Home >>ReactJS Tutorial >React state vs props

    React state vs props

    « Previous Next »

    State Vs. Props

    State

    The state is an updatable structure that can change over time, and is used to contain data or information about the component. The change of state will occur as a response to user action or system event. It is the core of the component reacting which determines the component 's behavior and how it will render. You have to keep a state as simple as possible. It represents the local state, or information, of the part. This can only be accessed or modified directly within the component or via the component.

    Props

    Props are components of read-only use. This is an object that stores a tag's attribute value, which functions like the HTML attributes. It allows data to be transferred from one component to another. This is similar to function arguments and can be passed as arguments passed in a function to the variable. Props are immutable so we can't adjust the props within the component.

    Difference between State and Props

    SN Props State
    1. Props are read-only. Changes in State can be asynchronous.
    2. Props are immutable. State is mutable.
    3. Props allow you to transfer the data as an argument from one component to other components. State keeps data on the components.
    4. Child component can access by props. Child components can't access state.
    5. Props are used to communicate between components. With the component, states can be used to render dynamic changes.
    6. Stateless component can have Props. Stateless components cannot have State.
    7. Props make components reusable. State cannot make components reusable.
    8. Props are external, and controlled by something that renders the component. The State is internal and is itself controlled by the React Component.

    The table below will guide you on the change in props and state.

    SN Condition Props State
    1. Can get initial value from parent Component? Yes Yes
    2. Can be changed by parent Component? Yes No
    3. Can set default values inside Component? Yes Yes
    4. Can change inside Component? No Yes
    5. Can set initial value for child Components? Yes Yes
    6. Can change in child Components? Yes No
    SN State and Props
    1. Both objects are plain JS.
    2. Both can be set to default values.
    3. Both of these are read-only when they use it.
    « Previous Next »

    ReactJS Tutorial Reactjs Introduction ReactJs - Environment Setup ReactJS JSX ReactJS Components ReactJS State ReactJS Props ReactJS Props Validation React state vs props ReactJS Component API ReactJS Component Life Cycle ReactJS Forms ReactJS Events ReactJS Refs ReactJS Keys ReactJS Router ReactJS Flux Concept React Redux ReactJS Animations React Higher-Order Components
    No Sidebar ads