Tips and tricks in ReactJS

Tram Ho

Here are some great tips that you can apply to improve the quality of your React project.

These tricks will not only make your code cleaner and more reliable, but will also make your React app development and experience simpler and more enjoyable.

Apply these tricks in your React project today

Replace redux with React query

As our application gets bigger, managing the state on our components will of course become much more complicated, we can look to state management libraries like redux.

If our data is receiving data input from the API, usually we will use redux to fetch the state server and then update the state into our application.

This can be a arduous process, not only do you have to find and fetch the data, but you also have to deal with different states, depending on the data or in the loading, error…

Instead of using redux to manage data fetched from the server, you can use React Query.

React Query not only gives you greater control over the execution of HTTP requests in your application through built-in hooks, but also allows for seamless state management across components, without having to manually update state.

Here’s how to use React Query in the index.js file:

Here we are setting up a query client that will set up a cache so we can easily manage any requests that have been made in the past, plus a component to pass it down the entire tree component.

How do you initiate requests to React Query?

You can do so with the useQuery hook, which gets an identifier for the query (in this case since we are loading user data, so will be ‘user’). plus a fucntion used to find and fetch data.

As you can see, React Query takes care of the various states that can happen when we find and fetch data. We don’t need to manage these states manually anymore, we can also destroy them from the return via useQuery.

Now that we have fetched the user data and stored it in the cache, all we need to do to be able to use it on any other component is call useQuery() with the ‘user’ keyword. that we have associated with it.

Make React context easier through the use of custom hooks.

You can follow my old post here for better understanding

Manage context providers in a Custom component.

Almost in any react js application you will need some Context providers.

After working with React for a while, this is what most people tend to do:

What can we do with this mess?

Instead of putting all the context providers in the file, we can create a component called ContextProviders.

This allows us to use the children props, then we need to put all the providers in this component:

Then wrap the Context Providers outside the App:

Using map with React fragment

The map() function in React allows us to take an array and iterate it, then display each data element via Jsx

However in some cases we want to iterate over that data without wanting to return it in the Jsx word part.

A little known trick that can iterate over a dataset is React fragment

Share the news now