Physical Address
304 North Cardinal St.
Dorchester Center, MA 02124
In this part, we will start learning about react hooks, its types and working. React Hooks are introduced in react 16.8 version, If you don’t want to use class component just for state then react hooks help you to do that. Now you can use state in functional component using hooks. And also you can’t use hooks inside the class component.
Hooks is the special function that allows us to hook into the React features. For example, useState is a Hook that lets you add React state to function components. If we need to use state in our application then we had to convert our function to class component but with the help of hooks we can use state in functional component as well.
Working with classes.
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
vehicleId: 0
};
}
render() {
return (
<div>
<h1>Update Vehicle ID</h1>
<p>vehicleId: {this.state.vehicleId}</p>
<button onClick={() => this.setState({ vehicleId: this.state.vehicleId + 1 })}>Click</button>
</div>
);
}
}
As we can see, working with class component to access state we have too lengthy code, class component needs to add constructor, this
keyword, and need super() with props. So all these things becomes complex, no doubt they will work, but it’s not optimized and efficient to do some task we need simple code and logic.
Let’s see same work with functional component with hooks:
function App() {
const [vehicleId, setVehicleId] = useState(0);
return (
<div>
<h1>Update Vehicle ID</h1>
<p>vehicleId: {vehicleId}</p>
<button onClick={() => setVehicleId(vehicleId + 1)}>Click</button>
</div>
);
}
Okay, this code looks far better than above one, because it is simple, Short and actually much more efficient than before one. This only example is able to show you the actual power of react hooks, if you compare both codes, then you will find out that we don’t need any extra constructor or this keyword here to access the hooks. We just need to import the package or library for hooks. By the way, both codes have similar outputs, but simply hooks make your life easy.
There are some important things you should remember before using the hooks:
What do React Hook change? **Everything!
There are some basic hooks which you should know and practice it:
These are some basic hooks we have seen, Also there are some more advanced hooks also available:
We will learn each and every hook in detail in our future posts, so stay tuned…..
Watch video introduction for hooks here:
[…] this part, we will see the first and most important hook, which is React useState hook. useState hook is pretty straight forward where we have 2 arguments, one for current state and […]
[…] this part, we will learn about React useEffect hook. useEffect hook is used to give effect or side effect once the application get rendered, as an argument for […]
[…] this part, we will learn about react useRef hook. React useRef hook is a special function which allows us to manipulate or change directly to DOM using reference and […]
[…] useDebugValue is the hook with which we can debug our custom hooks or application, Simply it helps us find bugs or errors in our custom hooks. useDebugValue helps us […]
[…] our application performance and makes it even faster. useTransition and useDeferredValue are the hooks which used to render the complex logic or bigger data very speedy, so user experience won’t get […]
[…] this part, we will learn about react useId hook, React useId hook used to provide unique ID to elements. This hook generates a string which is unique ID for each […]
[…] this part, we will learn about custom hooks in react, Since we have learned so much about our React hooks, and we have covered almost all types of hooks (it is possible I could have missed some). So […]
[…] and can be accessible by user which makes state interactive. States are the basic concept for react hooks as well, so learning state give much more value to […]
[…] this part, we will see about react context API. So react context API is a concept provided by react hooks, React context API allows us to easily access data at different level of component tree, without […]