Understanding of states and props in React.js

selvanivas

2 min read

·

Oct 4, 2026

--

Listen

Share

hi everyone

Today, I am continuing my React learning series by sharing what I’ve learned and understood about states and props.

before going to states and props we need to know hooks .

What is hooks?

Hooks is a function that may or maynot return some value. It can be single or multiple values of varibales and fucntions. It must start with the name use then the hookname.

What is state ?

state is bascically a data or value . whenever the data updated in the js by the state variable the state update the value on the ui .state in react also a hook. It is only used to update inside the component .

why state?

in react there the developer no longer with direct intreaction with the real dom. react suggests the developer avoid to update the direct value using dom events. So the react provides states to update the value in virutal dom and it can update the real dom . the developer only udpates the data or value using state to the virtual dom and and react rerenders only the particular component based on the state changes.

useState hook:

you can update the state values by this hook.

syntax:

const [value,setValue] = useState(initialValue)

here value is a variable that act as state variable and setValue is a fucntion that updates the state variable.

example:

import {useState} from 'react'
const App = () =>{
const [count,setCount] = useState(0);
return (
<>
<h1>{count}</h1>
<button onCLick={()=>setCount(count++)}>Increment</button>
</>
)}

what is props?

props is a read only object passes from parent to child component. It applies the changes whatever the changes inside the parent.

example:

const Child = ({count}) => {
  return (
    <div>
       <h1> Count : {count}</h1>
    </div>
  )
}

export default Child

import {useState} from 'react'
const Parent= () =>{
const [count,setCount] = useState(0);
return (
<>
<button onCLick={()=>setCount(count++)}>Increment</button>
 <Child count={count} />
</>
)}

export default Parent