Hooks
How to Fetch Data with React Hooks
In this tutorial, we’re going to learn about new React feature called “Hooks”. Well, I have written a lot of tutorials about React Hooks itself, but in this practicular post, we’re going to learn how we can send an HTTP request asynchronously with this awesome React feature.
Getting Started
First, you obviously need a React application!
If you don’t have it already, you can easily use create-react-app by running this command below.
A Brief Guide to Test React Components with Hooks
Testing is a fundamental skill for every web developer to build high quality and stable web applications. But, it’s also intimidating especially for those who just getting started with web development. But it turns out: with modern frameworks and libraries, testing is not that hard.
A lot of developers avoid to test their applications, and you shouldn’t!
Getting started
To get started with this tutorial, you need to have a good understanding about the basics of React and React Hooks (e.g. useState and useEffect).
Global State with React Hooks
React Hooks let you use state and other React features in functional components. On the other hand, React Context provides a way to pass data around components tree having without pass props down manually.
With both features combined, we can now build our very own state management without using third-party libraries. Besides making our web applications lighter, our code is much more efficient and readable.
Disclaimer
First disclaimer, these methods are not the best practice to manage global state (use Redux instead). Second, there some third party libraries out there that are similar to what we are doing in this tutorial. If those are what you’re looking for, definitely check out something like Unstated Next or Easy Peasy.
How to Optimize React Hooks Performance
Hooks are one of React’s most influential features that redefine the way we write components in React. They let you use the majority of class-based component features within a functional component, which leads us to smaller boilerplate and easier to test.
To get the most out of this feature, let’s take a look at how we can optimize our React apps performance that uses hooks.
Getting started
Let’s get started by initializing a React application with Create React App.