Forem: Hafiz Muhammad Bilal

Beginner's Guide to React Query

Hafiz Muhammad Bilal — Wed, 08 Feb 2023 10:59:16 +0000

Data fetching is an essential part of building modern web applications. As there is no specific approach to fetch data from API in React, developers do it in their own ways. One of the most popular method is to use React's hook useEffect.

Disadvantages of existing data fetching techniques (useEffect)

One of the biggest disadvantages of using the useEffect hook for data fetching is the unnecessary re-renders that can occur. This can lead to poor performance, especially in complex applications with multiple components and large data sets. Additionally, managing state and handling errors can become challenging when using useEffect.

Intro to React Query

React Query is a library that makes it easy to fetch, cache, and manage data in your React applications. It provides a simple and effective solution for data fetching that overcomes many of the disadvantages of using useEffect.

Implementation

Enough talk, let's code now.

Creating React App

Let's create a react app first.

npx create-react-app react-query-guide
cd react-query-guide
npm start

yarn create react-app react-query-guide
cd react-query-guide
yarn start

Your app would be live on http://localhost:3000

Install `react-query`

npm install react-query

yarn add react-query

Setup JSON Server

Now let's setup a json server for users API
Install json-server package:

npm install json-server

yarn add json-server

Create a file db.json and populate following data in it:

{
  "users": [
    {
      "id": 1,
      "name": "Bilal Riaz"
    },
    {
      "id": 2,
      "name": "Haris Ejaz"
    },
    {
      "id": 3,
      "name": "Hamza Hameed"
    },
    {
      "id": 4,
      "name": "Zeeshan Ali"
    }
  ]
}

Add a script in package.json file as:

"serve-json": "json-server --watch db.json --port 4000"

Then execute

npm run serve-json

yarn run serve-json

Your server would be running on http://localhost:4000

Introducing React Query

Now it's time to use React Query in our app. Let's update our App.js file:

import { QueryClient, QueryClientProvider } from 'react-query';

const queryClient = new QueryClient();

const App = () => {
  return (
    <QueryClientProvider client={queryClient}>
      <div>App</div>
    </QueryClientProvider>
  );
};

export default App;

We have created a queryClient with the use of QueryClient, provide it to QueryClientProvider and wrap the whole app with it. This is essential to make use of React Query's features throughout the app.

Fetching Data with `useQuery`

Now it's time to make network requests. Let's install axios for this purpose.
Install axios:

npm install axios

yarn add axios

Create a component Users.js to display fetched users from API.

import axios from 'axios';
import { useQuery } from 'react-query';

const fetchUsers = () => axios.get('http://localhost:4000/users');

const Users = () => {
  const { isLoading, data } = useQuery({
    queryKey: 'users',
    queryFn: fetchUsers,
  });

  if (isLoading) {
    return <h2>Loading...</h2>;
  }

  return (
    <div>
      {data?.data?.map((user) => (
        <p key={user?.id}>{user?.name}</p>
      ))}
    </div>
  );
};

export default Users;

Here we're using useQuery hook to fetch users data. We have provided a unique queryKey and a function fetchUsers which returns a promise to queryFn property.

We get several properties from useQuery hook as two of them isLoading & data have been shown in the code.

Then make use of Users.js component in App.js:

import { QueryClient, QueryClientProvider } from 'react-query';
import Users from './Users';

const queryClient = new QueryClient();

const App = () => {
  return (
    <QueryClientProvider client={queryClient}>
      <Users />
    </QueryClientProvider>
  );
};

export default App;

We have successfully fetched users with the use of React Query.

`cacheTime`

By default, your query remains in the cache for 5 minutes but you can configure it as:

const { isLoading, data } = useQuery({
    queryKey: 'users',
    queryFn: fetchUsers,
    cacheTime: 2000
  });

You can configure cacheTime in milliseconds.
You are probably thinking what actually cacheTime means? Basically it is the time for how long your query would be cached. For example, you fetch users with queryKey: "users", fetching users would bring data from cache and fetching from API continues in the background and then updates the cached data with the data from API.

`staleTime`

By default, every query will trigger a network request if you are fetching something from API. But you can use the cached data instead of making network request again & again. It is helpful in the case where we know that the data coming from API is static as it doesn’t often change. To do so, you can configure staleTime in milliseconds as:

const { isLoading, data } = useQuery({
    queryKey: 'users',
    queryFn: fetchUsers,
    staleTime: 30000  //0ms by default
  }

Fetching Data on Button Click

Till now, API request is being made when component mounts. If we want to fetch users on some button click, we would configure useQuery hook as:

const { isLoading, data, refetch } = useQuery({
    queryKey: 'users',
    queryFn: fetchUsers,
    enabled: false
  }

refetch is a function to run the queryFn function.
We would add a button in jsx and configure it to fetch users on clicking it.

    <div>
      <button onClick={refetch}>Fetch Users</button>
      {data?.data?.map((user) => (
        <p key={user?.id}>{user?.name}</p>
      ))}
    </div>

Posting Data with `useMutation`

Enough for fetching data, it's time to talk about posting/updating data. We would use useMutation hook for this purpose. Let's implement adding user feature with it.
Update your Users.js file as:

import axios from 'axios';
import { useMutation, useQuery } from 'react-query';

const fetchUsers = () => axios.get('http://localhost:4000/users');

const addNewUser = () =>
  axios.post('http://localhost:4000/users', {
    name: 'Ali Zuberi',
  });

const Users = () => {
  const { isLoading, data, refetch } = useQuery({
    queryKey: 'users',
    queryFn: fetchUsers,
  });
  const { mutate } = useMutation(addNewUser);

  if (isLoading) {
    return <h2>Loading...</h2>;
  }

  return (
    <div>
      <button onClick={refetch}>Fetch Users</button>
      <button onClick={mutate}>Add User</button>
      {data?.data?.map((user) => (
        <p key={user?.id}>{user?.name}</p>
      ))}
    </div>
  );
};

export default Users;

We have created addNewUser function which return a promise and assign it to the useMutation hook. We have extracted out mutate function from the hook which would be called on clicking Add User button.

Refetch Data After Mutation

New user can be added successfully till now. But the issue is that adding a new user is not re-fetching the updated users list. To do so, configure useMutation with onSuccess function as:

  const { mutate } = useMutation(addNewUser, {
    onSuccess: refetch,
  });

Mutate Data with Dynamic Values

If you want to add a new user with the name provided by an input, update Users.js file as:

import axios from 'axios';
import { useState } from 'react';
import { useMutation, useQuery } from 'react-query';

const fetchUsers = () => axios.get('http://localhost:4000/users');

const addNewUser = (userName) =>
  axios.post('http://localhost:4000/users', {
    name: userName,
  });

const Users = () => {
  const [username, setUsername] = useState('');
  const { isLoading, data, refetch } = useQuery({
    queryKey: 'users',
    queryFn: fetchUsers,
  });
  const { mutate } = useMutation(addNewUser, {
    onSuccess: refetch,
  });

  if (isLoading) {
    return <h2>Loading...</h2>;
  }

  return (
    <div>
      <div>
        <input
          placeholder='Enter name'
          value={username}
          onChange={(e) => setUsername(e?.target?.value)}
        />
      </div>
      <button onClick={() => mutate(username)}>Add User</button>
      <button onClick={refetch}>Fetch Users</button>
      {data?.data?.map((user) => (
        <p key={user?.id}>{user?.name}</p>
      ))}
    </div>
  );
};

export default Users;

Conclusion

React Query is a powerful tool for simplifying data management in React applications, making it easier to fetch, cache, and manage data with ease. Whether you're a beginner or an experienced developer, incorporating React Query into your workflow can greatly enhance the performance and efficiency of your applications. So, start exploring its capabilities today and elevate your React development game.

Links

Here is the Github repository for the code covered in this blog.
Co-authored by - harisbinejaz

Introduction to React

Hafiz Muhammad Bilal — Thu, 17 Nov 2022 06:23:49 +0000

React is a very popular JavaScript library for building user interfaces

Pre-requisites

HTML
JavaScript

Why React?

React was introduced by Facebook in 2013. Due to its readable syntax & code re-usability, it has become one of the most popular & most used libraries for front-end development.
React has a very strong community on the internet world so most issues during development are solved quickly.
React is easy to learn as its JSX (JavaScript XML) syntax is very close to HTML and enhances the confidence of a novice developer.

Basic Concepts of React

We will discuss some basic fundamental concepts of React:

1. Components

Components are building blocks of a React app. A component has one or more than one element of HTML to re-use it wherever needed. With the use of components, we get rid of writing redundant code. There are two types of components:

Class Components
Functional Components

2. JSX

JSX is a way to write React code. As from its name we can understand it's a mixture of JavaScript and XML as a result of a syntax which is easy to understand
For example:

const element = <h1>Welcome to React World!</h1>;

3. Props

Props are arguments we can pass into React components. Basically props are used for connecting different components by passing some value as an attribute to a React component.
One component can pass value in the other

4. State

State is the heart of a React app. Basically, state is used to store data which is required in our React component. Using state, changes in data can be seen in real-time without refreshing webpage

Enough Talk, Let's Code

We will build a simple React app which shows a list of quotes with their authors. We can add a quote and see a live update in the quotes table.
Let's start by creating a simple React app by running this command:

yarn create react-app my-app

This creates a React app named my-app with a built-in folder structure. In project folder, run :

yarn start

This starts your app at http://localhost:3000/
A simple React app has been created but we will customize it!
Open this folder in your favourite code editor.
Remove everything from return statement of App.js and refactor code as:

import React, { useState } from "react";
import AddQuoteForm from "./components/AddQuoteForm";
import { data } from "./components/Data";
import QoutesTable from "./components/QoutesTable";
import "./App.css";
function App() {
  const [quotesList, setQuotesList] = useState(data);
  const addQuote = (quote, author) => {
    const quoteObject = { quote: quote, author: author };
    setQuotesList([...quotesList, quoteObject]);
  };
  return (
    <div>
      <QoutesTable quotesList={quotesList} />
      <AddQuoteForm addQuote={addQuote} />
    </div>
  );
}
export default App;

App.js returns a div containing two React components. Let's create these components.
Inside the src directory, create a folder components. Inside it, create a file named QuotesTable.js and add following code:

import React from "react";
function QoutesTable(props) {
  return (
    <table>
      <thead>
        <tr>
          <th>Quote</th>
          <th>Author</th>
        </tr>
      </thead>
      <tbody>
        {props.quotesList.map((quote) => (
          <tr>
            <td>{quote.quote}</td>
            <td>{quote.author}</td>
          </tr>
        ))}
      </tbody>
    </table>
  );
}
export default QoutesTable;

This component will render quotes table. map function iterates each element of quotesList array and returns a tr containing quote and its author.
Residing in components directory, create a file named Data.js and add some dummy data in it:

export const data = [
  {
    quote:
      "Start writing, no matter what. The water does not flow until the faucet is turned on.",
    author: "Louis L'Amour",
  },
  {
    quote:
      "Get it down. Take chances. It may be bad, but it's the only way you can do anything really good.",
    author: "William Faulkner",
  },
  {
    quote: "The first draft is just you telling yourself the story.",
    author: "Terry Pratchett",
  },
];

Now create a component named AddQuote.js and write following code:

import React, { useState } from "react";
function AddQuoteForm(props) {
  const [quote, setQuote] = useState("");
  const [author, setAuthor] = useState("");
  const handleClick = () => {
    props.addQuote(quote, author);
    setQuote("");
    setAuthor("");
  };
  return (
    <div className="add-quote-form">
      <div>
        <label>Quote</label>
        <input
          type="text"
          value={quote}
          onChange={(e) => setQuote(e.target.value)}
        />
      </div>
      <div>
        <label>Author</label>
        <input
          type="text"
          value={author}
          onChange={(e) => setAuthor(e.target.value)}
        />
      </div>
      <button onClick={handleClick}>ADD</button>
    </div>
  );
}
export default AddQuoteForm;

This component will create a form to take quote and author as inputs and on button click, quote will be appended to the quotes table. This update will be real-time.
This is the beauty of React!
Remove everything from App.css and add the following code for better representation.

table,
th,
td {
  border: 1px solid black;
  border-collapse: collapse;
}
th,
td {
  padding: 1rem;
}
table {
  border-spacing: 5px;
  width: 50%;
  margin-left: 25%;
  margin-top: 1rem;
}
.add-quote-form {
  width: 50%;
  margin-left: 25%;
  margin-top: 1.5rem;
}
.add-quote-form input {
  width: 100%;
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
  height: 1.5rem;
}

Hurraaay! You just wrote your first React program.

React - Best Practices

Hafiz Muhammad Bilal — Wed, 16 Nov 2022 13:14:05 +0000

While working on a React App, following these coding conventions will give you a better development experience

VS Code is Highly Recommended as IDE

Visual Studio Code has several features that a React developer loves. It gives a lot of useful extensions to make the development environment better. For React, here are some useful extensions which will assist you during development

Prettier
ES Lint
JavaScript (ES6) code snippets
Reactjs code snippets
Auto import

Use ES6 Syntax

Clean code is always appreciated. In JavaScript, you can adopt ES6 syntax to make your code cleaner.

Write Arrow Functions

// ES5
function getSum(a, b) {
  return a + b;
}

// ES6
const getSum = (a, b) => a + b;

Use Template Literal

// ES5
var name = "Bilal";
console.log("My name is " + name);

// ES6
const name = "Bilal";
console.log(`My name is ${name}`);

Use const & let

They have block scope. Variables with const declaration can't be changed but with let, they are mutable

// ES5
var fruits = ["apple", "banana"];

// ES6
let fruits = ["apple", "banana"];
fruits.push("mango");

const workingHours = 8;

Object Destructuring

var person = {
  name: "John",
  age: 40,
};

// ES5
var name = person.name;
var age = person.age;

// ES6
const { name, age } = person;

Defining Objects

var name = "John";
var age = 40;
var designations = "Full Stack Developer";
var workingHours = 8;

// ES5
var person = {
  name: name,
  age: age,
  designation: designation,
  workingHours: workingHours,
};

// ES6
const person = { name, age, designation, workingHours };

You will experience many features and flexibility in ES6 syntax

Don't Forget key Prop With map in JSX

Always assign a unique value to the key prop to every JSX element while mapping from an array. Read official docs for better understanding

const students = [{id: 1, name: 'Bilal'}, {id: 2, name: 'Haris'}];

// in return function of component
<ul>
  {students.map(({id, name}) => (
    <li key={id}>{name}</li>
  ))}
</ul>;

Component Name Should be in PascalCase

const helloText = () => <div>Hello</div>; // wrong

const HelloText = () => <div>Hello</div>; // correct

Variable & Function Names Should be in camelCase

const working_hours = 10; // bad approach

const workingHours = 10; // good approach

const get_sum = (a, b) => a + b; // bad approach

const getSum = (a, b) => a + b; // good approach

ID & Class Names Should be in kebab-case

<!--bad approach-->
<div className="hello_word" id="hello_world">Hello World</div>

<!--good approach -->
<div className="hello-word" id="hello-world">Hello World</div>

Always Check null & undefined for Objects & Arrays

Neglecting null and undefined in the case of objects & arrays can lead to errors.

So, always check for them in your code

const person = {
  name: "Haris",
  city: "Lahore",
};
console.log("Age", person.age); // error
console.log("Age", person.age ? person.age : 20); // correct
console.log("Age", person.age ?? 20); //correct

const oddNumbers = undefined;
console.log(oddNumbers.length); // error
console.log(oddNumbers.length ? oddNumbers.length : "Array is undefined"); // correct
console.log(oddNumbers.length ?? "Array is undefined"); // correct

Avoid Inline Styling

Inline styling makes your JSX code messy. It is good to use classes & ids for styling in a separate .css file

const text = <div style={{ fontWeight: "bold" }}>Happy Learing!</div>; // bad approach

const text = <div className="learning-text">Happy Learing!</div>; // good approach

in .css file:

.learning-text {
  font-weight: bold;
}

Avoid DOM Manipulation

Try to use React state instead of DOM manipulation as

Bad approach

<div id="error-msg">Please enter a valid value</div>

document.getElementById("error-msg").visibility = visible;

Good approach

const [isValid, setIsValid] = useState(false);

<div hidden={isValid}>Please enter a valid value</div>;

Set isValid false or true where you have logic of validating a value

Always Remove Every Event Listener in useEffect

Don't forget to write cleanup function in useEffect to remove event listener you added before

const printHello = () => console.log("HELLO");
useEffect(() => {
  document.addEventListener("click", printHello);
  return () => document.removeEventListener("click", printHello);
});

Avoid Repetition, Use Generic Components

It is the best thing to make your code cleaner. Write a generic component for similar group of elements and render them on the basis of props
passed to it

const Input=(props)=>{
  const [inputValue, setInputValue]=useState('');
  return(
    <label>{props.thing}</label>
    <input type='text' value={inputValue} onChange={(e)=>setInputValue(e.target.value)} />
  )
}

In other component you can use Input component as

<div>
  <Input thing="First Name" />
  <Input thing="Second Name" />
</div>

Don’t Throw Your Files Randomly

Keep the related files in the same folder instead of making files in a single folder.

For example, if you want to create a navbar in React then you should create a folder and place .js & .css files related to the navbar in it

Functional Components Are Recommended

If you want to render some elements and don't need to use state then use functional components instead of class components because functional components are easy to use.

Moreover, if you have an idea of React Hooks, then with functional components you can easily play with the state too.

Create a Habit of Writing Helper Functions

Sometimes you need a utility at more than one time across your React App.

To deal with this scenario efficiently, Write a helper function in a separated file named helper-functions.js, import wherever you want to use it and call that function in it.

Use Ternary Operator Instead of if/else if Statements

Using if/else if statements makes your code bulky. Instead try to use ternary operator where possible to make code simpler & cleaner

// Bad approach
if (name === "Ali") {
  return 1;
} else if (name === "Bilal") {
  return 2;
} else {
  return 3;
}

// Good approach
name === "Ali" ? 1 : name === "Bilal" ? 2 : 3;

Make index.js File Name to Minimize Importing Complexity

If you have a file named index.js in a directory named actions and you want to import action from it in your component, your import would be like this

import { actionName } from "src/redux/actions";

actions directory path is explained in the above import . Here you don't need to mention index.js after actions like this

import { actionName } from "src/redux/actions/index";

Destructuring of Props

If you want to get rid of writing an object name again and again to access its properties, then destructuring of that object is the best solution for you.
Suppose your component is receiving some values like name, age and designation as props

// Bad approach
const Details = (props) => {
  return (
    <div>
      <p>{props.name}</p>
      <p>{props.age}</p>
      <p>{props.designation}</p>
    </div>
  );
};

// Good approach
const Details = ({ name, age, designation }) => {
  return (
    <div>
      <p>{name}</p>
      <p>{age}</p>
      <p>{designation}</p>
    </div>
  );
};

Don't Try to Access Modified State Variable in the Same Function

In a function, if you are assigning a value to a state variable then you won't be able to access that assigned value even after it has been assigned in that function

const Message = () => {
  const [message, setMessage] = useState("Hello World");
  const changeMessage = (messageText) => {
    setMessage("Happy Learning");
    console.log(message); // It will print Hello World on console
  };

  return <div>{message}</div>;
};

Use === Operator instead of ==

While comparing two values, strictly checking both values and their data types is a good practice.

"2" == 2 ? true : false; // true
"2" === 2 ? true : false; // false

Now get your hands dirty with these best coding practices in React!