DEV Community: miroiu-dev

Master React: Say Goodbye to 7 Costly Mistakes Forever!

miroiu-dev — Sat, 21 Oct 2023 16:41:45 +0000

React is a very powerful library for creating UI. With this power, you are responsible for crafting readable and bug-free code, which means that you have to keep up with best practices and patterns. The easiest way to become a better developer is to learn from your mistakes, or even other people's.

In this article, based on my actual work experience, you'll learn how to avoid 7 common mistakes that many developers make.

Calling a function that takes no arguments in an event handler.
Using useEffect to transform rendering data.
Resetting the state of a component using useEffect.
Not using key in lists.
Modify the state value directly by assignment.
Not using the previous state when calling setState.
Forgetting to clean up side effects in useEffect .

1. Calling a function that takes no arguments in an event handler

❌ The wrong way

export function App() {
 const [clapped, setClapped] = useState(false);

 const clap = () => setClapped(true);

 return (
  <div>
   <p>Support this author: {clapped ? 'yes' : 'no'}</p>
   <button onClick={(ev: MouseEvent) => clap()}>Clap</button>
  </div>
 );
}

✅ The right way

export function App() {
 const [clapped, setClapped] = useState(false);

 const clap = () => setClapped(true);

 return (
  <div>
   <p>Support this author: {clapped ? 'yes' : 'no'}</p>
   <button onClick={clap}>Clap</button>
  </div>
 );
}

🎈 Explanation

We can simply provide the function, without calling it. This works because React will take that function and call it internally with the event object as an argument. Our function takes no argument, so the event object will be discarded.

2. Using useEffect to transform rendering data

❌ The wrong way

function Form() {
  const [firstName, setFirstName] = useState('Miroiu');
  const [lastName, setLastName] = useState('Dev');
  const [fullName, setFullName] = useState('');

  useEffect(() => {
    setFullName(firstName + ' ' + lastName);
  }, [firstName, lastName]);
  // ...
}

✅ The right way

function Form() {
  const [firstName, setFirstName] = useState('Miroiu');
  const [lastName, setLastName] = useState('Dev');

  const fullName = firstName + ' ' + lastName;
  // ...
}

🎈 Explanation

Using unnecessary effects can lead to bugs or even infinite loops in your application. You can create new variables based on the state or props of your component that will change on render, without using an effect.

3. Resetting the state of a component using useEffect

❌ The wrong way

export default function Form({ formId }) {
  const [name, setName] = useState('');

  useEffect(() => {
    setName('');
  }, [formId]);
  // ...
}

✅ The right way

export default function Page({ formId }) {
  return (
    <Form
      formId={formId}
      key={formId}
    />
  );
}

🎈 Explanation

Keys identify and track items. This is important for React's virtual DOM reconciliation process, which efficiently updates the user interface by minimizing unnecessary re-renders and improving performance.

When we formId changes, our key changes as well. React sees this and thinks the Form component is a new component, so it mounts it again and resets the state.

4. Not using key in lists

❌ The wrong way

export default function UserList({ users }) {
  return (
    {users.map(user => <User {...user}/>)}
  );
}

✅ The right way

export default function UserList({ users }) {
  return (
    {users.map(user => <User key={user.id} {...user}/>)}
  );
}

🎈 Explanation

This wouldn't be a problem if users never changes, React will resort to using the element's index as a default key. If we perform operations such as add or remove, then we really need to provide a key. React will know which elements have been added, removed, or changed when the list is re-rendered. This results in better performance, as React can minimize the number of DOM manipulations needed. Using the key prop will prevent many bugs.

5. Modify the state value directly by assignment

❌ The wrong way

export default function User() {
  const [name, setName] = useState(''); 

  const handleOnChange = (ev: ChangeEvent<HTMLInputElement>) => {
     name = ev.target.value
  }

  return (
    <input onChange = {handleOnChange} />
   );
}

✅ The right way

export default function User() {
  const [name, setName] = useState(''); 

  const handleOnChange = (ev: ChangeEvent<HTMLInputElement>) => {
    setName(ev.target.value);
  }

  return (
    <input onChange = {handleOnChange} />
   );
}

🎈 Explanation

Updating the state directly will not trigger a re-render. React may not recognize the change when the state is modified directly, and it can result in bugs and issues. To ensure the proper behavior and reactivity of your React components, you should always use the provided state update mechanisms.

6. Not using the previous state when calling setState

❌ The wrong way

export default function UserList() {
  const [users, setUsers] = useState<User[]>([]);

  const addUser = (user: User) =>
    users.push(user);
    setUser(users);
  }

  //...
}

✅ The right way

export default function UserList() {
  const [users, setUsers] = useState<User[]>([]);

  const addUser = (user: User) =>
    setUser(prevUsers => [...prevUsers, user]);
  }

  //...
}

🎈 Explanation

Using the correct method with the function that takes the prevUsers as an argument ensures that you're always working with the latest state, preventing race conditions and issues that may arise from concurrent state updates. This is particularly important in situations where multiple state updates may occur in rapid succession or in response to user interactions.

7. Forgetting to clean up side effects in useEffect

❌ The wrong way

export default function UserList() {
   const [users, setUsers] = useState<User[]>([]);

   const onAddUser = (user: User) => {
      setUsers(prevUsers => [...prevUsers, user]);
   }

   useEffect(() => {
      socket.on('add-user', onAddUser);
   },[])
  //...
}

✅ The right way

export default function UserList() {
   const [users, setUsers] = useState<User[]>([]);

   const onAddUser = (user: User) => {
      setUsers(prevUsers => [...prevUsers, user]);
   }

   useEffect(() => {
      socket.on('add-user', onAddUser);

      return () => {
        socket.off('add-user', onAddUser);
      }
   }, [])
  //...
}

🎈 Explanation

Forgetting to unsubscribe can lead to unexpected bugs and memory leakage. In this example when the socket acts on the add-user event, because we did not unsubscribe, onAddUser will be called twice. Also every time we left the page, and came back, another subscription to the add-user event will be added, which results in memory leakage.
It is always a best practice to unsubscribe when possible.

Thank you for reading!

If you enjoyed this article, please clap a few times or share it with your awesome friends.

If you like this content, feel free to follow me on medium.

Syntactic Sugar

We could create objects with prototypes in the past, but the syntax was too verbose. As a result, classes were introduced, and the new class simply inherits what prototypes are and their methods.

Before ES6:

function Book(title, author, releaseYear){
  this.title = title;
  this.author = author;
  this.releaseYear = releaseYear;
}

Book.prototype.getOverview = function(){
  return `The book ${this.title} written by ${this.author} was released in ${this.releaseYear}.`;
}

const book = new Book("Atomic Habits", "James Clear", 2018);

console.log(book.getOverview());

After ES6:

class Book {
  constructor(title, author, releaseYear){
    this.title = title;
    this.author = author;
    this.releaseYear = releaseYear;
  }

  getOverview(){
    return `The book ${this.title} written by ${this.author} was released in ${this.releaseYear}.`;
  }
}

const book = new Book("Atomic Habits", "James Clear", 2018);

console.log(book.getOverview());

Defining a class

To define a class we have to use the class keyword followed by its name and curly braces.

class Book {}

A class can have a constructor, a special method within a class that is automatically called when an instance of the class or object is created. The purpose of a constructor is to initialize the object’s state or perform any setup operations required for the object to function properly. In our example, we assign properties to our class that we can access later.

class Book {
  constructor(title, author, releaseYear){
    this.title = title;
    this.author = author;
    this.releaseYear = releaseYear;
  }
}

Note: Classes can have only one constructor. JavaScript doesn’t support constructor or method overloading.

Classes can hold properties, primitive or non-primitive types, and methods (functions). While it’s possible to explicitly add properties to a class outside of the constructor, the recommended approach is to assign them directly within the constructor.

class Book {
  // This is possible, but redundant in this scenario since we've already defined these properties within the constructor.
  title;
  author;
  releaseYear;
  constructor(title, author, releaseYear){
    this.title = title;
    this.author = author;
    this.releaseYear = releaseYear;
  }
}

To define methods in classes, we utilize a similar syntax to functions but without the need for the function keyword.

class Book {
  constructor(title, author, releaseYear){
    this.title = title;
    this.author = author;
    this.releaseYear = releaseYear;
  }

  // We omit the function keyword
  getOverview(){
    return `The book ${this.title} written by ${this.author} was released in ${this.releaseYear}.`;
  }
}

To make a class useful, we need to instantiate an object of that class by using the new keyword followed by calling the constructor with the correct arguments:

const book = new Book("Atomic Habits", "James Clear", 2018);

If we do not provide a constructor, internally it will be defaulted to:

constructor(){}

Note: A class is not hoisted to the top, unlike functions. To avoid errors, declare them before instantiating objects of that type.

Static keyword

A static method or property can be accessed directly from the class itself, without needing to create an instance of the class. This feature is particularly valuable for utility functions or constant variables.

class Utilities {
  static PI = 3.14;

  static max(a, b){
    return a > b ? a : b;
  }
}

console.log(Utilities.PI); // Output: 3.14
console.log(Utilities.max(1,2)); //Output: 2

If you’re acquainted with the JavaScript Math class, understanding this concept becomes more straightforward.

Private properties

A private property or method can’t be accessed from outside the class. To define such a property or method we use # symbol.

class Book {
  #ISBN = 5;
  constructor(title, author, releaseYear, price){
    this.title = title;
    this.author = author;
    this.releaseYear = releaseYear;
    this._price = price;
  }

  #getOverview(){
    return `The book ${this.title} written by ${this.author} was released in ${this.releaseYear}.`;
  }
}

const book = new Book("Atomic Habits", "James Clear", 2018, 120);

//This will throw an error: "getOverview is not a function"
book.getOverview();

//This will return undefined
book.ISBN;

Getters and setters

Properties offer a flexible way to both retrieve and set values without the need for direct access to the underlying data. This flexibility enhances code maintainability and encapsulation.

We can enhance our Book class by introducing a private property named price. To safeguard it from invalid values, we'll use a setter method, while retaining the ability to access it using a getter method.

class Book {
  constructor(title, author, releaseYear, price){
    this.title = title;
    this.author = author;
    this.releaseYear = releaseYear;
    this._price = price;
  }

  // Getter
  get price() {
    return this._price;
  }

  // Setter
  set price(newPrice){
    if(this._price === 0) throw new Error("Price can't be zero");
    this._price = newPrice;
  }
}

// Usage

const book = new Book("Atomic Habits", "James Clear", 2018, 120);

console.log(`Price: $${book.price}`);

book.price = 10;

console.log(`Price: $${book.price}`);

It’s worth noting that we didn’t invoke the setter method explicitly; instead, we utilized direct assignment. The same applies to the getter method. This feature offers a convenient and elegant approach to working with our class properties.

Inheritance

To begin, it’s essential to grasp the fundamental concepts of superclass and derived classes.

A superclass, also known as a base class or parent class, is a class from which other classes inherit properties and methods

A derived class, also known as a subclass or child class, is a class that inherits attributes and methods from a superclass

Inheritance is a fundamental concept in object-oriented programming, enabling code reuse, extensibility, and the organization of classes into hierarchies.

For example, we want to create a Technical Book that has an edition property. We know that a Technical Book is a Book, so we extend from Book to make its properties available to our new class.

class Book {
  constructor(title, author, releaseYear, price){
    this.title = title;
    this.author = author;
    this.releaseYear = releaseYear;
    this._price = price;
  }
}

class TechnicalBook extends Book {
  constructor(title, author, releaseYear, price, edition){
    super(title, author, releaseYear, price);
    this.edition = edition;
  }
}

const technicalBook = new TechnicalBook("Atomic Habits", "James Clear", 2018, 120, 1);

console.log(`Edition ${technicalBook.edition} of the book ${technicalBook.title}`);

We use the super keyword to call the constructor of the superclass Book from our derived class TechnicalBook. This is done to access and execute the behavior defined in the superclass, which can then be extended or customized in the derived class.

Using Typescript

TypeScript is a statically typed superset of JavaScript that supports classes for object-oriented programming.

Access modifiers

There are 3 access modifiers:

public — properties and methods can be accessed outside the class.
private — properties and methods can only be accessed inside the class. Derived classes do not have access to these properties or methods.
protected — properties and methods can only be accessed inside the class or by derived classes.

By default all methods and properties are private.

class Book implements IBook {
  public title: string;
  private author: string;
  protected releaseYear: number;

  public constructor(title: string, author: string, releaseYear: number){
    this.title = title;
    this.author = author;
    this.releaseYear = releaseYear;
  }

  public getOverview(){
    return `The book ${this.title} written by ${this.author} was released in ${this.releaseYear}.`;
  }
}

Take a look at this clever technique using access modifiers to directly initialize properties within the constructor’s parameter list.

class Book {
  public constructor(public title: string, private author: string, protected releaseYear: number){}

  public getOverview(){
    return `The book ${this.title} written by ${this.author} was released in ${this.releaseYear}.`;
  }
}

Interfaces

An interface serves as a contract that a class must adhere to. It obliges the class to implement the specified properties and methods outlined in the interface. This enforces a clear set of rules and expectations for how the class should behave.

interface IBook {
  title: string;
  author: string;
  releaseYear: number;
  getOverview: () => string;
}

class Book implements IBook {
  public title: string;
  public author: string;
  public releaseYear: number;

  public constructor(title: string, author: string, releaseYear: number){
    this.title = title;
    this.author = author;
    this.releaseYear = releaseYear;
  }

  getOverview(){
    return `The book ${this.title} written by ${this.author} was released in ${this.releaseYear}.`;
  }
}

Abstract class

In TypeScript, an abstract class is a class that cannot be instantiated on its own but serves as a blueprint for other classes. Abstract classes allow you to define common methods and properties that must be implemented by derived classes. To create an abstract class in TypeScript, you use the abstract keyword. Here's a basic example:

abstract class Shape {
  abstract calculateArea(): number;

  displayArea() {
    console.log(`Area: ${this.calculateArea()}`);
  }
}

class Circle extends Shape {
  constructor(private radius: number) {
    super();
  }

  calculateArea(): number {
    return Math.PI * Math.pow(this.radius, 2);
  }
}

const circle = new Circle(5);

circle.displayArea(); // Output: Area: 78.53981633974483

If you found this article interesting, please consider leaving a follow or a reaction. Your feedback motivates me to create more content. If you have any questions or specific topics you’d like me to write about, please feel free to leave a comment with your suggestions. I appreciate your support and input!

Master Data Fetching in React with This Easy Guide

miroiu-dev — Sun, 03 Sep 2023 16:40:58 +0000

Fetching data efficiently in React is quite challenging. We must rely on third-party libraries for caching, data synchronization between tabs, deduplication, revalidation, etc. Since reinventing the wheel is not optimal, the best choice would be to use a library.

In this article, I will show you how to go from a naive approach to data fetching to an efficient one. You will also learn to use libraries like react-query and SWR.

Building off of the naive approach

I can guarantee you have seen a similar code or are guilty of writing this yourself.

Suppose you have a component with the primary objective of displaying data about a beer.

type Beer = {
  id: number,
  brand: string,
  name: string,
  yeast: string,
  malts: string,
  alcohol: string,
}

function NaiveDataFetching(){
  const [beer, setBeer] = useState<Beer | undefined>();
  const [error, setError] = useState('');
  const [loading, setLoading] = useState(true);

  useEffect(() => {
   fetch("https://random-data-api.com/api/v2/beers")
   .then(res => res.json()).then((data: Beer) => {
    setLoading(false);
    setBeer(data)
   }).catch(error => {
    console.log(error); 
    setError("Something went wrong")})
  },[])

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

  if(loading) return <div>loading...</div>

  return <div>
    <p>id: {beer?.id}</p>
    <p>brand: {beer?.brand}</p>
    <p>name: {beer?.name}</p>
    <p>yeast: {beer?.yeast}</p>
    <p>malts: {beer?.malts}</p>
    <p>alcohol: {beer?.alcohol}</p>
  </div>
}

Before I inform you what issues arise with this code, I would like to bring to your attention this specific useEffect caveat, as stated in the official React documentation.

When Strict Mode is on, React will run one extra development-only setup+cleanup cycle before the first real setup. This is a stress-test that ensures that your cleanup logic “mirrors” your setup logic and that it stops or undoes whatever the setup is doing. If this causes a problem, implement the cleanup function.

Fixing racing conditions

In React 18, during development, the useEffect hook is called twice. Fetching data without implementing a cleanup function will result in what’s known as “race conditions”. This occurs because network responses may arrive in a different order than sent requests, causing you to see results from multiple requests instead of just the latest one.

You can see the data updating twice, which isn’t the desired behavior.

So, how can we address and resolve this issue? The following way is taken from the React documentation.

We can tackle this issue by introducing a variable named ignore, initially set to false. When we receive the data, we check if this variable is true. If true, we assign the beer data accordingly. But how does ignore change to true? To accomplish this, we must implement a cleanup function responsible for setting ignore back to false, this will be called during the unmounting of the component. During the initial mount, the data will be ignored because after the unmount, ignore will be set to true. This results in the retrieval of the most recent data during the second mount. This occurs exclusively during development; in a production setting, useEffect executes only once.

useEffect(() => {
   let ignore = false;
   fetch("https://random-data-api.com/api/v2/beers")
   .then(res => res.json()).then((data: Beer) => {
    if(!ignore) {
      setLoading(false);
      setBeer(data)
    }  
   }).catch(error => {
    console.log(error); 
    setError("Something went wrong")})

    return () => {ignore = true}
  },[])

While this works, there is a minor issue. The first request is still fulfilled even though the component is unmounted, we just don't update our state.

Introducing Abort Controller

The AbortController interface represents a controller object that allows you to abort one or more Web requests as and when desired.

This is exactly what we want. We simply want to abort irrelevant requests.

useEffect(() => {
  const controller = new AbortController();

   fetch("https://random-data-api.com/api/v2/beers", {signal: controller.signal})
   .then(res => res.json()).then((data: Beer) => {
      setLoading(false);
      setBeer(data)
   }).catch(error => {

    if(error instanceof DOMException){
      console.log("Request aborted", error.message); 
      return;
    }

    setError("Something went wrong")})

    return () => controller.abort();
  },[])

Note: When abort() is called, the fetch() promise is rejected with a DOMException named AbortError. In this case, we only want to see an error related to the data fetching, not aborting the request.

Issues regarding this approach

Fetching data in this manner makes our code tightly coupled to the component. What if we want another Beer component that uses this data differently? It also violates the SOLID Principles, because the component should only be responsive for displaying the data. (This used to be fixed with an HOC in the past, now we have custom hooks).

Using useFetchBeerData hook

To make the code more reusable we can extract it into a custom hook.

function useFetchBeerData(){
  const [beer, setBeer] = useState<Beer | undefined>();
  const [error, setError] = useState('');
  const [loading, setLoading] = useState(true);

  useEffect(() => {
   const controller = new AbortController();

   fetch("https://random-data-api.com/api/v2/beers", {signal: controller.signal})
   .then(res => res.json()).then((data: Beer) => {
      setLoading(false);
      setBeer(data)
   }).catch(error => {

    if(error instanceof DOMException){
      console.log("Request aborted", error.message); 
      return;
    }

    setError("Something went wrong")})

    return () => controller.abort();
  },[])

  return {beer, error, loading}
}

function NaiveDataFetching(){
  const {beer, error, loading} = useFetchBeerData();

  // Rest of your component logic
}

This is great. Now we can reuse our fetching logic in any component without copying and pasting the code. There is one issue though, it is too specific. What if we want to fetch a beer that doesn’t meet our Beer interface, has another URL, or for other reasons?

No worries. I got you covered. We can make our hook more generic.

export function useFetch<T>(
 fetcher: (signal: AbortSignal) => Promise<T>,
 rerun?: any[]
): {
 data?: T;
 loading: boolean;
 error: unknown;
} {
 const [data, setData] = useState<T>();
 const [loading, setLoading] = useState(true);
 const [error, setError] = useState();

 const deps = rerun ? [...rerun] : [];

 useEffect(() => {
  const controller = new AbortController();

  fetcher(controller.signal)
   .then(d => {
    setLoading(false);
    setData(d);
   })
   .catch(error => {
    setError(error);
   });

  return () => controller.abort();
 }, [...deps]);

 return {
  data,
  loading,
  error,
 };
}

A fetcher is simply a function that we pass to our hook. Its purpose is to decouple the fetching logic from the hook itself, enabling us to provide various implementations. For instance:

async function fetchBeer(signal: AbortSignal){
  const { data } = await axios.get<Beer>("https://random-data-api.com/api/v2/beers", {signal});

  return data;
 }

Or the following:

 async function fetchBeer(signal: AbortSignal){
  const response = await fetch("https://random-data-api.com/api/v2/beers", {signal});
  const data = await response.json();

  return data as Beer;
 }

And simply switch it as needed.

function BetterDataFetching(){
  const {data, error, loading} = useFetch<Beer>(fetchBeer)

  // This is a viable way to check for errors. Note: For axios replace DOMException with CanceledError.
  // Checking for errors thrown by Aborting a request is only specific to my example so the code can render. 

  if(error && !(error instanceof DOMException)) return <div>{(error as Error).message}</div>

  // Rest of your component logic

What does the rerun parameter do? It essentially provides us with the ability to re-fetch our data when we have dependencies. For example, if we have a property like budget from the query string, we want our data to be updated whenever it changes.

This code is far better than what we started with, and it will work perfectly if you don’t need all the benefits of using a library. For simple projects this is perfect. It proved to be valuable during the project I worked on during my Summer Internship at Roweb.

React Query

React Query is hands down one of the best libraries for managing server state. It works amazingly well out-of-the-box, with zero-config, and can be customized to your liking as your application grows.

React Query allows you to defeat and overcome the tricky challenges and hurdles of server state and control your app data before it starts to control you.

Let’s see how we can implement react-query into our example. First, install it into your project npm i @tanstack/react-query. To use React Query effectively, it’s essential to wrap your application code with the QueryClientProvider. If you skip this step, React Query won't work.

const client = new QueryClient();

function App() {
  return (
      <QueryClientProvider client={client}>
        <ReactQueryFetching/>
      </QueryClientProvider>
  );
}

Once you have wrapped your application with the QueryClientProvider, you can easily fetch your data using React Query.

function ReactQueryFetching(){
  const {data: beer, error, isLoading} = useQuery<Beer>({ queryKey: ['beer'], queryFn: fetchBeer })

  if(error instanceof Error) return <div>{error.message}</div>

  if(isLoading) return <div>loading...</div>

  return <div>
    <p>id: {beer?.id}</p>
    <p>brand: {beer?.brand}</p>
    <p>name: {beer?.name}</p>
    <p>yeast: {beer?.yeast}</p>
    <p>malts: {beer?.malts}</p>
    <p>alcohol: {beer?.alcohol}</p>
  </div>
}

The useQuery hook handles various aspects of data fetching and management, including caching, request deduplication, revalidation, and more.

The queryKey parameter takes a key that can be an array of strings, numbers, and objects. The key is used to cache your data, which can be useful in many cases. Query Keys are hashed deterministically! This means that no matter the order of keys in objects, they are considered equal.

useQuery({ queryKey: ['todos', { status, page }], ... })

// they are the same

useQuery({ queryKey: ['todos', { page, status }], ...})

This queryFn is where you define the logic for fetching the data you want to query, and React Query uses this function to manage the data and provide caching, revalidation, and other features. It is the same concept we used in the custom hook.

Handling and Throwing Errors

A query function can be any function that returns a promise. The promise that is returned should either resolve the data or throw an error. Any error that is thrown in the query function will persist on the error state of the query.

async function fetchBeer(){
 const response = await fetch("https://random-data-api.com/api/v2/beers");

 if (!response.ok) {
  // this will be persisted in our error state
  throw new Error('Network response was not ok') 
}

 const data = await response.json();

 return data as Beer;
}

Data Mutations

In the context of data mutation, imagine we have a state containing an array of beers, and our goal is to append a new beer to the database while simultaneously updating the user interface upon button click. This can be accomplished straightforwardly by supplying a mutation function and specifying the query key to the queryClient to trigger data revalidation.

// Mutation function

async function addBeer(newBeer: FormData){
  await fetch("https://example.beer-api.com", {
    method: "POST",
    body: newBeer
  });
}

// Inside component

 const queryClient = useQueryClient()

 const mutation = useMutation({
    mutationFn: addBeer,
    onSuccess: () => queryClient.invalidateQueries({ queryKey: ['beers'] })
  })

 const onSubmit = (event) => {
    event.preventDefault()
    mutation.mutate(new FormData(event.target))
  }

 return <form onSubmit={onSubmit}>...</form>

This is all you need to get started. If you want to read more about react-query please visit their website.

SWR

SWR (Stale-While-Revalidate) is a popular JavaScript library used for data fetching and caching in client-side applications. It’s often used in React and other modern frontend frameworks to simplify the management of remote data.

Inside your React project directory, run the following: npm i swr.

Then you can import useSWR and start using it inside any function components:

import useSWR from 'swr'

async function fetchBeer(){
  const response = await fetch("https://random-data-api.com/api/v2/beers");
  const data = await response.json();

  return data as Beer;
 }

function Beer() {
  const { data, error, isLoading } = useSWR('beer', fetchBeer)

  if (error) return <div>failed to load</div>;

  if (isLoading) return <div>loading...</div>;

  return <div>Brand - {beer.brand}!</div>
}

The first parameter takes a string that represents a key, just like in react-query, used to cache your data. The second parameter takes a fetcher function where you define the logic for fetching data. The third parameter is optional, it takes an object of options.

const { data, error, isLoading, isValidating, mutate } = useSWR(key, fetcher, options)

Note: By default, key will be passed to fetcher as the argument. So the following 3 expressions are equivalent:

useSWR('beer', () => fetcher('beer'))
useSWR('beer', url => fetcher(url))
useSWR('beer', fetcher)

An excellent feature offered by this library is its automatic data revalidation when you refocus a page or switch between tabs.

Handling and Throwing Errors

If an error is thrown inside fetcher, it will be returned as error by the hook.

async function fetchBeer(){
  const response = await fetch("https://random-data-api.com/api/v2/beers");

  if (!response.ok) {
    // this will be persisted in our error state
    throw new Error('Network response was not ok') 
  }

  const data = await response.json();

  return data as Beer;
 }

Data Mutations

In the scenario previously mentioned in react-query, where we’re dealing with an array of beers, you can easily update the data by calling the mutate function with the new data. This straightforward approach allows for seamless data mutation and UI updates.

const { data, mutate } = useSWR('beers', fetcher)

const onSubmit = (event) => {
    event.preventDefault()

    const newBeer = { ... }

    mutate([...data, newBeer]);
  }

 return <form onSubmit={onSubmit}>...</form>

In this context, there’s no need for a key as you would use in React Query because the mutate function is directly associated with the component.

Revalidation

When you call mutate(key) or just mutate() without any data, it will trigger a revalidation for the resource.

// tell all SWRs with this key to revalidate

<button onClick={() => mutate('beer')}>Revalidate</button>

This is all you need to get started with SWR. If you want to read more please visit their website.

Ending Remarks

Both of these libraries enable you to create infinite scrolling or pagination. As it is beyond this tutorial's scope, I will not discuss it.

This article serves as an initial guide for fetching data in React. If you wish to delve deeper into this topic, I recommend visiting the documentation of the respective libraries mentioned, as they offer comprehensive information. Here, the aim was to provide you with the essential information to help you get started quickly.

If you have any questions regarding this article or found it helpful, please feel free to leave a response, or follow for more content. Your feedback and engagement are greatly appreciated!

You can also find this post on my blog in a better format.

3 Must-Know Rendering Optimizations in React

miroiu-dev — Sun, 03 Sep 2023 16:00:16 +0000

Before we dive deep into these optimizations we must understand why components re-render in React.

There are 3 reasons a component will re-render:

State changes — these occur when your component’s state is altered.
Parent re-render — a parent component’s state changes, leading to the recursive re-rendering of all its children.
Context value changes — this occurs when the values in the context, which components share, are modified.

If you want a deep understanding of how rendering works you should check out the official documentation.

Now that we’ve got a handle on why re-rendering happens, let’s move on to discussing on how we can improve performance.

Passing state down

Let’s look at the following example. Can you spot the issue?

export function Component() {
 const [isOpen, setIsOpen] = useState(false);

 return (
  <div>
   <button onClick={() => setIsOpen(true)}>Open</button>
   {isOpen ? <Popover> ? null}
   <HeavyComponent />
   <ReallyHeavyComponent />
  </div>
 )
}

We intend to trigger the popover when the button is clicked. It might look fine but whenever the isOpen state changes the component re-renders its children that don't change, which leads to poor performance. So how can we fix this?

We could use memo to memoize the components and prevent unnecessary re-renders like this:

const MemoizedHeavyComponent = memo(HeavyComponent);
const MemoizedReallyHeavyComponent = memo(ReallyHeavyComponent);

export function Component() {
 return (
  <div>
   <ButtonWithPopover />
   <MemoizedHeavyComponent />
   <MemoizedReallyHeavyComponent />
  </div>
 );
}

While this works, there is a better solution. We can simply move the state into its own component.

export function ButtonWithPopover() {
 const [isOpen, setIsOpen] = useState(false);

 return (
  <>
   <button onClick={() => setIsOpen(true)}>Open</button>
   {isOpen ? <Popover> ? null}
  </>
 );
}

Now whenever the state changes, only the ButtonWithPopover component will be re-rendered. So the final code will look like this

export function Component() {
 return (
  <div>
   <ButtonWithPopover />
   <HeavyComponent />
   <ReallyHeavyComponent />
  </div>
 );
}

Components as children prop

Consider the following example:

export function Component() {
 const [scrollY, setScrollY] = useState(0);

 return (
  <div
   onScroll={({ currentTarget }) =>
    setScrollY(currentTarget.scrollTop)
   }
  >
   <HeavyComponent />
   <ReallyHeavyComponent />
  </div>
 );
}

Again, changing the state re-renders the heavy components which is unnecessary. We can apply the previous optimization with a slight modification.

export function WithScroll({ children }) {
 const [scrollY, setScrollY] = useState(0);

 return (
  <div
   onScroll={({ currentTarget }) =>
    setScrollY(currentTarget.scrollTop)
   }
  >
   {children}
  </div>
 );
}

Here we pass our heavy components as children and they will be unaffected when state changes inside WithScroll.

export function Component() {
 return (
  <WithScroll>
   <HeavyComponent />
   <ReallyHeavyComponent />
  </WithScroll>
 );
}

Why does this work? Because children is just syntax sugar for passing the prop children, so this means that the parent, in this case Component has to re-render for it to do aswell. We can write the component from above like this:


export function Component() {
 return (
  <WithScroll
   children={
     <>
      <HeavyComponent />
      <ReallyHeavyComponent />
     </>
   }
  ></WithScroll>
 );
}

Components as props

What is wrong here?

export function Component() {
 return (
  <WithScroll
   children={
    <>
     <HeavyComponent />
     <ReallyHeavyComponent />
    </>
   }
  ></WithScroll>
 );
}

When isCollapsed changes the SlowComponent and VerySlowComponent have to re-render. To prevent this we can pass our components as props and it will work the same way children do from Components as children prop.

export function Component({ menu, content }) {
 const [isCollapsed, setIsCollapsed] = useState(false);

 return (
  <div className="wrapper">
   <div className="menu">{menu}</div>
   <div className="content">
    <button onClick={() => setIsCollapsed(!isCollapsed)} />
    {content}
   </div>
  </div>
 );
}

And the final code is:

export function ParentComponent({ menu, content }) {
 return (
  <Component menu={<SlowComponent />} content={<VerySlowComponent />} />
 );
}

Now, unless ParentComponent re-renders, whenever state changes inside Component, our menu and content props will be unaffected.

Enjoyed reading this post? Why not share it with your friends.

You can also find these posts on my blog in a better format.

Supercharge Your React Components with This Powerful Pattern

miroiu-dev — Sun, 03 Sep 2023 15:52:28 +0000

By adopting this pattern, you can enhance the performance and flexibility of your React components, reaping numerous advantages. However, perhaps most importantly, you’ll earn recognition from your fellow programmers for crafting code that is both readable and succinct.

Compound Pattern and its advantages

You’ve probably seen this pattern before, its popularity has skyrocketed over the years. Libraries such as Radix UI, Material UI, Chakra UI, and others use it to enhance the developer experience.

Here are the some advantages of using this pattern:

Flexibility: Compound components provide a flexible way to build complex UI components while maintaining a clean and concise API.
Intuitive API: By encapsulating related child components within a parent component, the Compound Components pattern offers a clear and intuitive API
Separation of Concerns: With compound components, each child component is responsible for its specific functionality, making it
easier to maintain and update individual components.
Customization: It allows developers to easily swap or extend child components

Envision this situation: you’re working on a e-commerce application, and your product manager wants you to implement a Product Card to showcase the latest products available. You open Figma and end up with this design:

Your product manager approves of it and now requests you to proceed with coding. So you end up writing this code:

Without Compund Pattern - Miroiu Dev (forked) - CodeSandbox

codesandbox.io

Prior to deploying the code to production, you find yourself thinking, “What if the need arises to incorporate an additional section or alter the layout? Hmm… This lacks scalability!”

You start brainstorming and unknowingly find yourself implementing the compound pattern.

With Compound Pattern - Miroiu Dev (forked) - CodeSandbox

codesandbox.io

“This seems acceptable, but I believe there’s room for improvement” you comment. It dawns on you that in JavaScript, functions are objects, allowing you to assign properties to them like so:

function Product(){
    return {...}
}

function ProductTitle(){
    return {...}
}

// This doesn't throw any errors

Product.Title = ProductTitle;

Typescript offers built-in support for extending components using the compound pattern.

Your code appears to be in this format currently:

With Better Compund Pattern - Miroiu Dev (forked) - CodeSandbox

codesandbox.io

You don’t hesitate and present it to your product manager, who gives their approval. A day later your product manager wants you to change the layout of the component into this:

Because your intuition was right, you are able make changes effortlessly due to the flexibility of the pattern.

This represents the final version of the code. You can locate various progressions within separate files. Feel free to uncomment and comment them according to your preferences.

React Compound Pattern - Miroiu Dev - CodeSandbox

codesandbox.io

As evident from this brief narrative, the code underwent a progression from an inferior state to an improved one. The initial version proved to be non-scalable, as any addition of new sections or layout changes would necessitate direct modifications to the component. This practice is undesirable as it contradicts the SOLID principle of “open to extension, closed to modification,” and introduces unnecessary complexity.

The second version represents a notable enhancement in terms of scalability. It boasts a clear separation of concerns, making the process of adding or removing components significantly easier. One could even consider stopping at this stage, given the high level of flexibility and performance achieved.

In the final version, a minor adjustment was made to enhance readability, resulting in the requirement to import just a single object. This seemingly small modification has a positive impact on the overall code quality and maintainability. Of course, this is a very simplified version of a real life component, if your component is stateful I recommend using the Context API.

Enjoyed reading this post? Why not share it with your friends?

You can also find these posts on my blog in a better format.

DEV Community: miroiu-dev

Master React: Say Goodbye to 7 Costly Mistakes Forever!

1. Calling a function that takes no arguments in an event handler

❌ The wrong way

✅ The right way

🎈 Explanation

2. Using useEffect to transform rendering data

❌ The wrong way

✅ The right way

🎈 Explanation

3. Resetting the state of a component using useEffect

❌ The wrong way

✅ The right way

🎈 Explanation

4. Not using key in lists

❌ The wrong way

✅ The right way

🎈 Explanation

5. Modify the state value directly by assignment

❌ The wrong way

✅ The right way

🎈 Explanation

6. Not using the previous state when calling setState

❌ The wrong way

✅ The right way

🎈 Explanation

7. Forgetting to clean up side effects in useEffect

❌ The wrong way

✅ The right way

🎈 Explanation

Thank you for reading!

Mastering JavaScript Classes: Your Shortcut to OOP Success!

Syntactic Sugar

Defining a class

Static keyword

Private properties

Getters and setters

Inheritance

Using Typescript

Access modifiers

Interfaces

Abstract class

Master Data Fetching in React with This Easy Guide

Building off of the naive approach

Fixing racing conditions

Introducing Abort Controller

Issues regarding this approach

Using useFetchBeerData hook

React Query

Handling and Throwing Errors

Data Mutations

SWR

Handling and Throwing Errors

Data Mutations

Revalidation

Ending Remarks

3 Must-Know Rendering Optimizations in React

Passing state down

Components as children prop

Components as props

Supercharge Your React Components with This Powerful Pattern

Compound Pattern and its advantages

Without Compund Pattern - Miroiu Dev (forked) - CodeSandbox

With Compound Pattern - Miroiu Dev (forked) - CodeSandbox

With Better Compund Pattern - Miroiu Dev (forked) - CodeSandbox

React Compound Pattern - Miroiu Dev - CodeSandbox