React function component + Hooks + MobX store

clients.tsx

import List from '@material-ui/core/List';
import ListItem from '@material-ui/core/ListItem';
import ListItemText from '@material-ui/core/ListItemText';
import { createStyles, makeStyles, Theme } from '@material-ui/core/styles';
import { inject, observer } from 'mobx-react';
import React, { useEffect } from 'react';
import { Client } from '../stores/clients/interface';
import { Typography } from '@material-ui/core';

const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    root: {
      backgroundColor: theme.palette.background.paper,
    },
  }),
);

const ClientsList = inject("clientStore")(observer(({clientStore}) => {
    const classes = useStyles();
    const {status, clients} = clientStore;
    
    // Similar to componentDidMount and componentDidUpdate:
    useEffect(() => {
      const {getClients} = clientStore;
      getClients();
    }, []);
    // do anything only one time if you pass empty array []
    // keep in mind, that component will be rendered one time (with default values) before we get here

    if (status === "pending") {
      return (
        <Typography color="textSecondary" align="center">Loading...</Typography>
      )
    } else {
      if (clients.length === 0) {
        return (
          <Typography color="textSecondary" align="center">No clients yet</Typography>
        )
      } else {
        return (
          <List dense className={classes.root}>
            {clients.map((client: Client) => {
              return (
                  <ListItem key={client.id} button>
                  <ListItemText id={`${client.id}`} primary={`${client.name}`} />
                  </ListItem>
              );
            })}
          </List>
        )
      }
    }
}));

export default ClientsList