SOLID in React Native - Part 1

The acronym SOLID addresses a set of five rules in software design. With these rules, we can create software with better understanding, flexibility, and maintainability. In this post, we will introduce the first of these principles - the Single Responsibility Principle, applied to mobile development with React Native, which can also be applied to any React application.

Single Responsibility Principle (SRP) - "A class ought to serve a single, clearly defined purpose, reducing the need for frequent changes."

Let's observe the ListRepos component below and analyze what it's doing:

import React, { useEffect, useState } from 'react';
import { View, Text, Alert, ActivityIndicator } from 'react-native';

import axios from 'axios';

type Repo = {
  id: string;
  language: string;
  name: string;
};

export const ListRepos = () => {
  const [repos, setRepos] = useState<Array<Repo>>([]);
  const [isLoading, setIsLoading] = useState<boolean>(true);

  useEffect(() => {
    (async () => {
      try {
        const { data } = await axios.get(
          'https://api.github.com/users/davi1985/repos'
        );

        setRepos(data);
      } catch (error) {
        Alert.alert('Something wrong!');
      } finally {
        setIsLoading(false);
      }
    })();
  }, []);

  if (isLoading) {
    return <ActivityIndicator size={'large'} color={'#4285F4'} />;
  }

  return (
    <View>
      {repos.map((item) => (
        <View key={item.id}>
          <Text>{item.name}</Text>
          <Text>{item.language}</Text>
        </View>
      ))}
    </View>
  );
};        

We can observe that the component is:

• Performing data fetching,
• Rendering the list of repositories, and
• Managing states.

Thinking about SOLID, specifically the SRP, we can separate the responsibilities. First, let's isolate the data fetching part into a hook:

import { useState, useEffect } from 'react';
import { Alert } from 'react-native';

import axios from 'axios';

type Repo = {
  id: string;
  language: string;
  name: string;
};

export const useGetRepos = () => {
  const [repos, setRepos] = useState<Array<Repo>>([]);
  const [isLoading, setIsLoading] = useState<boolean>(true);

  useEffect(() => {
    (async () => {
      try {
        const { data } = await axios.get(
          'https://api.github.com/users/davi1985/repos'
        );

        setRepos(data);
      } catch (error) {
        Alert.alert('Something wrong!');
      } finally {
        setIsLoading(false);
      }
    })();
  }, []);

  return { isLoading, repos };
};        

Now, our ListRepos component is cleaner and has fewer responsibilities, see:

import React from 'react';
import { View, Text, ActivityIndicator } from 'react-native';
import { useGetRepos } from './useGetRepos';

export const ListRepos = () => {
  const { isLoading, repos } = useGetRepos();

  if (isLoading) {
    return <ActivityIndicator size={'large'} color={'#4285F4'} />;
  }

  return (
    <View>
      {repos.map((item) => (
        <View key={item.id}>
          <Text>{item.name}</Text>
          <Text>{item.language}</Text>
        </View>
      ))}
    </View>
  );
};        

We can further improve. If we observe, each item in our list is being rendered directly in our main component. We can separate it and pass via props what is necessary for its rendering. Notice:

import { Text, View } from 'react-native';

type Props = {
  id: string;
  language: string;
  name: string;
};

export const Repo = ({ id, language, name }: Props) => (
  <View key={id}>
    <Text>{name}</Text>
    <Text>{language}</Text>
  </View>
);        

With our Repo component created, our ListRepos component becomes simpler.

import React from 'react';
import { View, ActivityIndicator } from 'react-native';
import { useGetRepos } from './useGetRepos';
import { Repo } from './Repo';

export const ListRepos = () => {
  const { isLoading, repos } = useGetRepos();

  if (isLoading) {
    return <ActivityIndicator size={'large'} color={'#4285F4'} />;
  }

  return (
    <View>
      {repos.map((item) => (
        <Repo {...item} />
      ))}
    </View>
  );
};        

We can continue to improve. I leave you with some challenges to implement and enhance your understanding of the SRP:

1. Isolate the Axios call in another file and only call this function in the useGetRepos hook.
2. The typing of the Repo component is the same as that used in the hook, meaning it's repeating. We can create a @types folder to share types throughout the application.

By implementing the Single Responsibility Principle (SRP) in our React Native development, we can establish a more cohesive and modular structure.

In the next post, we'll address another principle, further deepening our software design practices.