Difference between React State Using Hooks and Classes
React hooks is a new feature of react. In the release version of 16.8, Facebook released react hooks, which helped to use state in the function based components. We can now make a whole react application using only functional components.
State
State is something which is the property of the component. If state changes, the component changes, thus the component re-renders.
Hook
Hooks are something that lets you “hook into” react features. It is just a JavaScript function doing special things. For example, useState() creates the state variables, useEffect() causes effects like data fetching, subscriptions, manually changing dom etc.
State Using Hooks
Using hooks we can declare a state like this,
let [count, setCount]=useState(0);
Here, we used array destructuring to set the count variable. The setCount is a callback function which sets or modifies the value of the count variable. The useState() function makes the count variable a state variable.
So, the structure for declaring a state variable is,
let [variable, callback] = useState(initialValueOf of variable)
useState() takes one argument and that is the initial value of the state variable.
A sample code using useState(),
function App(){
const [count, setCount]=useState(0);
const add=()=>{
newCount=count+1;
setCount(newCount);
}
return(
<div>
<h1>{count}</h1>
<button onClick={add}>Add 1</button>
</div>
)
}
State Using Class Based Components
In class based components we need to declare the state in the “this.state” object inside the constructor. Anything declared inside the this.state object will be the property of the class.
We can add multiple state variables in one “this.state” object.
To change the value we need to use “this.setState()” method and modify the variable as an object to change the state variables.
A sample stateful class component,
class App extends React.Component{
constructor(){
super();
this.state={
count:0;
}
this.add=this.add.bind(this); //binds the add() method to the class
}
const add=()=>{
this.setState({count:count+1})
}
return(
<div>
<h1>{count}</h1>
<button onClick={this.state.count}>Add 1</button>
</div>
)
}
If a state has a variable named count, then it can be accessed by typing “this.state.count”.
Key Differences
Using hooks we can directly access a state variable. We can pass values using callback function to modify state variable. We can declare one state variable at a time using hooks. Hooks should be declared at top level.
Using class we need to declare the state inside the constructor. Here state variables cannot be directly accessed or modified. We can declare as much state variables we want in “this.state” object.
Conclusion
So, this is it. You now have the idea of differentiate between state using hooks and state using classes. These ways give you the flexibility to choose the way to build application.