Ionic V4 React – Hooks
Hello All,
In last topic we discuss about React installation using Ionic 4.Also, we discuss the Project structure of the Ionic 4 React application & in example we used the useState Hook in example. Now, Today we will discuss about Hooks in React JS.
What is Hooks ?
Basically, Hooks are newly added API reference in React 16.8
Hooks are useful to use state without using or writing a class.
The Basic Hooks are as follows :
- useState
- useEffect
- useContext
useState :
It returns a state value and setState function to update with the new value. In short we are able to update any value using this state.
Please see below example for more details :
import {
IonInput, IonItem, IonLabel, IonContent, IonHeader, IonTitle, IonToolbar,
IonButtons, IonButton
} from '@ionic/react';
import React, { useState } from 'react';
const Home: React.FunctionComponent = () => {
const [count, setState] = useState(0);
return (
<>
<IonHeader>
<IonToolbar>
<IonTitle>Ionic useState Example</IonTitle>
</IonToolbar>
</IonHeader>
<IonContent className="ion-padding">
<IonLabel>Updated count</IonLabel>
<IonTitle>{count}</IonTitle>
<IonToolbar>
<IonButtons slot="start">
<IonButton color="secondary" onClick={() => {
console.log(count);
setState(count => count + 1)
}}>Change default value</IonButton>
</IonButtons>
</IonToolbar>
</IonContent>
</>
);
};
export default Home;
In above example,
const [count, setState] = useState(0);
here we are initializing the count with value 0 & calling a function called setState on click of a button Change default value. In setState function we are increasing a count value by 1. So, If you run the above application you can able to see the updated value of count.
Please see below image for output :
We will see the other hooks in the later sessions…