DEV Community: dravidjones28

Getting Started with React Native in 2023: An Comprehensive Guide for Beginners

dravidjones28 — Wed, 09 Aug 2023 09:36:45 +0000

In the intersection of thriving software engineering demand and the rise of mobile application development, learning React Native in 2023 can be a game-changing move. There's no doubt that the realm of app development has rapidly evolved, making the technology we use today unquestionably different from what it was a decade ago. Let's delve into what makes React Native stand out, and arm you with the knowledge you need to begin your React Native journey in 2023.

React Native: An Overview

In the world of mobile app development, React Native, developed by Facebook, has gained immense recognition. Let's understand why:

Code Reusability: With React Native, you can use the same code for deploying apps on different platforms. This drastically reduces development time and costs.
Robust Performance: React Native provides almost identical performance to native apps because it uses the same building blocks as traditional iOS and Android apps.
Live Reload Feature: This remarkable feature allows you to see instant results of code changes, significantly improving the debugging process.

How to Start React Native as a Beginner

To jump-start your React Native learning journey in 2023, here are some crucial steps:

Understand JavaScript Fundamentals: Mastering JavaScript is vital as React Native is built on it.
Learn React: Get familiar with React before moving onto React Native. Understanding the foundational concepts will ease your transition.
- Hands-On Practice: Practice with simple apps before trying more complex projects.
- Stay Updated: With new updates, React Native is evolving. Stay in the loop through React Native’s official documentation and web resources.

Decoding Cons and Props in React Native

In React Native, 'props' and 'state' (often referred to as 'cons') are vital concepts. Let’s unravel them:

Props: Short for properties, props are arguments passed into React components. They help in making components reusable and dynamic.
State or Cons: While props are fixed throughout a component’s lifetime, the state or 'cons' can change. It is mutable and used for components to keep track of changing information.

React Native vs Flutter: The Key Differences

Choosing between React Native and Flutter for app development can be challenging. Here’s how they contrast:

Language: React Native uses JavaScript, while Flutter uses Dart, a less popular language.
Performance: Although both platforms offer good performance, Flutter has a slight edge due to its direct compilation to native code.
Community Support: React Native, being older, has wider community support compared to Flutter.
UI Components: Flutter offers a comprehensive variety of UI components, while React Native is more limited in this regard.

Conclusion

Entering the world of mobile app development through React Native can be a promising start. As 2023 approaches, arming yourself with an understanding of its concepts, pros, and comparisons with alternatives like Flutter, can set you up for success.

With React Native, you’re not just learning a toolset, but stepping into a fast-paced, exciting realm that's shaping the very way we interact with technology. Ready to step into the future of mobile app development with React Native?

Author’s Note: This article is intended to provide general guidance on getting started with React Native in 2023. As every learning journey is unique, I recommend leveraging a variety of resources to get the most comprehensive understanding. Happy coding!

How to Implement Infinite Queries in React Query

dravidjones28 — Wed, 19 Jul 2023 07:04:18 +0000

We're goona have a button for loading more data.

Now, in a real-world application, we often want to load more data once the user scrolls down and reaches the bottom of the page.

We'll explore that later and focus only on loading more data.



import { useInfiniteQuery } from "@tanstack/react-query";
import axios from "axios";

interface Users {
  id: number;
  name: string;
}

interface UserQuery {
  pageSize: number;
}

const useUsers = (query: UserQuery) =>
  useInfiniteQuery<Users[], Error>({
    queryKey: ["users", query],
    queryFn: () =>
      axios
        .get("https://jsonplaceholder.typicode.com/users", {
          params: {
            _page: 2,
            _limit: query.pageSize,
          },
        })
        .then((res) => res.data),
  });

export default useUsers;

How to calculate page number?

(useInfiniteQuery) has a function called (getNextPageParam) and it has two parameters.
1.) lastPage
2.) allPages

1.) (lastPage) is the array of Users.

2.) (allPages) is the two dimensional array of Users

Each element in this array is the Array of users.
This parameter (allPages) contains the data for all Pages.

So (getNextPageParam) function should return the next page number.
for example- if you are in page one we should return page 2.

So, how do you calculate this?

(allPages) parameters contains data for all Pages.

so you can return allPages.length + 1 as a next page number.



const useUsers = (query: UserQuery) =>
  useInfiniteQuery<Users[], Error>({
    queryKey: ["users", query],
    queryFn: ({ pageParam = 1 }) =>
      axios
        .get("https://jsonplaceholder.typicode.com/users", {
          params: {
            _page: pageParam,
            _limit: 4,
          },
        })
        .then((res) => res.data),

    getNextPageParam(lastPage, allPages) {
      return allPages.length + 1;
    },
  });

But at some point we are going reach the end the list. we don't want to increment the page number forever?

With JSON Placeholder, if we request data for a page that doesn't exist, we can get an empty array. At some point, lastPage is going to be an empty array.

We can give expression like this



 getNextPageParam(lastPage, allPages) {
      return lastPage.length > 0 ? allPages.length + 1 : undefined;
    },

But this is not the way to implement this logic. It varies based on your backend because your API should return the total number of records in advance, allowing us to calculate the number of pages and determine when we will reach the last page.

When we click on the 'Load More' button, the React Query will call the (getNextPageParam) function to retrieve the next page number. It will then pass the page number to the query function (queryFn).

so (queryFn) we need to add a parameter and destructor it and call (pageParam)



import { useInfiniteQuery } from "@tanstack/react-query";
import axios from "axios";

interface Users {
  id: number;
  name: string;
}

interface UserQuery {
  pageSize: number;
}

const useUsers = (query: UserQuery) =>
  useInfiniteQuery<Users[], Error>({
    queryKey: ["users", query],
// as a best practice we should initialize to 1, 
// so we data for the 
// first page 
    queryFn: ({ pageParam = 1 }) =>
      axios
        .get("https://jsonplaceholder.typicode.com/users", {
          params: {
            _page: pageParam,
            _limit: 4,
          },
        })
        .then((res) => res.data),

    getNextPageParam(lastPage, allPages) {
      return lastPage.length > 0 ? allPages.length + 1 : undefined;
    },
  });

export default useUsers;

So, in users component let's create a button, when clicking, it will fetch to next page.



import useUsers from "./hooks/useUsers";

const Users = () => {
  const pageSize = 4;
  const { data, error, isLoading } = useUsers({ pageSize });

  if (isLoading) return <div>Loading.....!</div>;
  if (error) return <div>{error.message}</div>;

  return (
    <div>

      <button>Load More</button>
    </div>
  );
};

export default Users;

infiniteQuery has a function called fetchNextPage.

So when you click the button call fetchNextPage.



import useUsers from "./hooks/useUsers";

const Users = () => {
  const pageSize = 4;
  const { data, error, isLoading, fetchNextPage } = useUsers({ pageSize });

  if (isLoading) return <div>Loading.....!</div>;
  if (error) return <div>{error.message}</div>;

  return (
    <div>

      <button onClick={() => fetchNextPage()}>Load More</button>
    </div>
  );
};

export default Users;

Now, we want to disable this button, while we are fetching next page.

infiniteQuery has a boolean property called isFetchingNextPage.



import useUsers from "./hooks/useUsers";

const Users = () => {
  const pageSize = 4;
  const { data, error, isLoading, fetchNextPage, isFetchingNextPage } =
    useUsers({ pageSize });

  if (isLoading) return <div>Loading.....!</div>;
  if (error) return <div>{error.message}</div>;

  return (
    <div>


      <button disabled={isFetchingNextPage} onClick={() => fetchNextPage()}>
        Load More
      </button>
    </div>
  );
};

export default Users;

data object that we get from the infinite query is an instance of data.

In this object we have couple of properties
1.) pageParams
2.) pages -> contains data for (allPages).



import useUsers from "./hooks/useUsers";

const Users = () => {
  const pageSize = 4;
  const { data, error, isLoading, fetchNextPage, isFetchingNextPage } =
    useUsers({ pageSize });

  if (isLoading) return <div>Loading.....!</div>;
  if (error) return <div>{error.message}</div>;

  return (
    <div>
      {data.pages.map((page, index) => (
        <div key={index}>
          {page.map((user) => (
            <li>{user.name}</li>
          ))}
        </div>
      ))}

      <button disabled={isFetchingNextPage} onClick={() => fetchNextPage()}>
        Load More
      </button>
    </div>
  );
};

export default Users;

Thank you!
God bless!

What is React-Query and How to fetch data using react query?

dravidjones28 — Tue, 18 Jul 2023 06:24:53 +0000

Normally this is how we fetch data from the backend.

import axios from "axios";
import { useEffect, useState } from "react";

interface Users {
  id: number;
  name: string;
}

const Users = () => {
  const [users, setUsers] = useState<Users[]>([]);
  const [error, setError] = useState("");

  useEffect(() => {
    axios
      .get("https://jsonplaceholder.typicode.com/users")
      .then((res) => setUsers(res.data))
      .catch((err) => setError(err.message));
  }, []);

  if (error) return <div>{error}</div>;

  return (
    <div>
      {users.map((item) => (
        <li key={item.id}>{item.name}</li>
      ))}
    </div>
  );
};

export default Users;

we use useState it allows you to add state to functional components and we use useEffect to fetch data from the backend and store in our state variable.

But there are few problems in this code.

No request cancellation
No separation of concerns
No retries
No automatic refresh
No caching

1.) No request cancellation: we are not cancelling the request if our component is unmounted.

2.) No separation of concerns: the query logic is leaked inside the component, we can't reuse it anywhere.

3.) No retries : we are not retrying failed request.

4.) No automatic refresh: If the data changes, while the users is on this page, they don't see the changes unless they refresh.

5.) No caching: if you want to know what is caching? Caching is the process of storing data in a place where it can be accessed more quickly and efficiently in the future.

We have lots of problem, that's why we use React-query.

React Query is a powerful library for managing data fetching and caching in React applications.

To install react query
On your terminal

npm i @tanstack/react-query

import React from "react";
import ReactDOM from "react-dom/client";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import App from "./App.tsx";

// We use QueryClient for managing and caching remote data in react query.

// first you need to create a new instance of Query client.
const queryClient = new QueryClient();

ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <QueryClientProvider client={queryClient}>
      <App />
    </QueryClientProvider>
  </React.StrictMode>
);

To fetch data with query hook

we use query hook to fetch the data and give configuration object with two properties
1.) queryKey
2.) queryFn

queryKey -> queryKey is the unique identifier for query, it used for caching, we set this in array of one or more values.

queryFn -> This is the function we use to fetch the data from the backend, this function should return a promise that resolves data or throws an error.

In the body the function I have used axios to fetch the data from the backend.

const userQuery = useQuery({
queryKey: ["users"],
queryFn: axios.get("https://jsonplaceholder.typicode.com/users").then(res => res.data)
})

This userQuery has bunch of properties like data, error, isLoading and so on.

let us destructure the userQuery.

const {data, error, isLoading} = useQuery({
queryKey: ["users"],
queryFn: axios.get("https://jsonplaceholder.typicode.com/users").then(res => res.data)
})

So when calling the query hook, we need to specify the type of errors that might happen when fetching data

const {data, error, isLoading} = useQuery<User[], Error>({
queryKey: ["users"],
queryFn: axios.get("https://jsonplaceholder.typicode.com/users").then(res => res.data)
})

import { useQuery } from "@tanstack/react-query";
import axios from "axios";
import { useEffect, useState } from "react";

interface Users {
  id: number;
  name: string;
}

const Users = () => {
  const { data, error, isLoading } = useQuery<User[], Error>({
    queryKey: ["users"],
    queryFn: () =>
      axios
        .get<Users[]>("https://jsonplaceholder.typicode.com/users")
        .then((res) => res.data),
  });

if(isLoading) return <div>Loading....!</div>
if(error) return <div>{error.message}</div>

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

export default Users;

But there is problem in this code, we don't have separation of concerns, our query is leaked.

so create a folder called hooks -> create a file called useUsers.ts

import { useQuery } from "@tanstack/react-query";
import axios from "axios";

interface Users {
  id: number;
  name: string;
}
const useUsers = () =>
  useQuery<Users[], Error>({
    queryKey: ["users"],
    queryFn: () =>
      axios
        .get<Users[]>("https://jsonplaceholder.typicode.com/users")
        .then((res) => res.data),
  });

export default useUsers;

import useUsers from "./hooks/useUsers";

const Users = () => {
  const { data, error, isLoading } = useUsers();

  if (isLoading) return <div>Loading.....!</div>;
  if (error) return <div>{error.message}</div>;

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

export default Users;

Thank you!