DEV Community: Alexander Dmitriev

Junior developers mistakes (Part 1)

Alexander Dmitriev — Sun, 09 Jan 2022 09:39:26 +0000

Introduction

Hi, in this article I will try to consider the most common mistakes novice developers make. Some of them might apply to more experienced developers as well.
This article is my opinion, a lot can cause controversy and discussion, I will be glad to know your opinion

Mistakes

I don't need computer science

Probably the most controversial point. Most likely, as a novice developer or developer of simple forms and applications, you do not need it. I know many middle developers who are satisfied with their level and knowledge, for such people programming is a job that is enough for them at work. Therefore, if you decide that you are something big for programming, or you have more professional ambitions, you should not dismiss such people, you are no better and no worse than them, you are just different.

But if you want to grow, there is nowhere without basic knowledge of computer science. Lack of this knowledge is an uncertainty that you, as a senior developer, cannot afford. And it is better to prepare for such tests in advance.

Using too many libraries

Use only proven and popular libraries (stars and issues on github, when was the last commit, how many downloads per week)
Not every task requires a library
The more untested and incomprehensible libraries there are, the higher the level of uncertainty

Not using libraries at all :D

The rules are the same as in the paragraph above. As a rule, a beginner will not write a solution better than in a popular library.

I know everything

If it seems to you that you have achieved everything and are not mistaken, read about the Dunning-Kruger Effect.
Try to understand your area deeper (if it's a WEB, then study the architecture of WEB applications, how the browser works, the TCP /IP protocol), for general development, try to study the most popular design patterns and then try to adapt them to your environment. You can also upgrade well in algorithms and structures - https://www.codewars.com/.

Bad questions

Asking the right questions is half the solution. As a novice developer, what do you do when you can't solve a problem? As a rule, the algorithm is always the following? If you are satisfied with the current level of tasks and responsibility and your knowledge and skills are enough for this, then you can skip this point.

As you can see, the correct algorithm is in the middle. This means that the other two approaches do not work. They work, but they create uncertainty in your decision. And uncertainty is fraught with errors and bugs that will be very difficult for you to catch.

How do I know if I'm asking a good question?

You ask a question for solve one problem
You understand the context of the problem, most likely you are faced with a limitation or do not know a specific simple algorithm
You can tell what you did and at what stage something went wrong

For example, you need to find the hundredth Fibonacci number

BAD QUESTION:

How to find the hundredth Fibanacci number ? (very abstract question)
I found a solution but don't understand it. Can you help me ? (you haven't learned the context, and you can't tell how programm works)

GOOD QUESTION:

I wrote a solution, I have a performance problem at the 100th step, maybe it's a recursive approach, can you tell me how to improve performance ? (Great question, you are in context, you have one problem that you do not know to solve yet)

Be a professional

A banal point about soft skills:

Not everyone around you is developers, try to explain yourself clearly to everyone
Don't defend a bad decision just because it's yours
Try to give a correct estimate of the timing - take twice as much as you planned
Argument your position not with phrases: I like it so much, I dislike your approach, etc. Try to provide examples of patterns and approaches that confirm the correctness of your position.
Don't be late for appointments
Pair programming is cool, don't be afraid to write with senior developers ......

Conclusion

Thank you for reading this article, I hope it helps you. I have not listed all the points and of course there will be a continuation if the article will be popular.

How to use Mobx in Next.js application (with demo)

Alexander Dmitriev — Fri, 07 Jan 2022 09:01:26 +0000

Introduction

Hello, in these article i will create next.js application for showing books with mobx. I will provide:

SSR with mobx hydration
Using hydrated mobx on client side
Show possible mistakes

Disclaimer

Text

English is not my native language, but i hope the code will tell you more than text :D

DEMO

If you don't want to read welcome to sandbox :D - Demo

Short theory

Before you start, you need to understand exactly what order the server and client rendering takes place in next.js.
Here are some nuances about the order in which next.js works and in which order we expect hydration.

Designations

Component - page component (pages/index.jsx)
Next-server - next.js application host
_app - next.js app component (pages/_app.jsx)
API-server - backend-application (not provided in demo, but in real world will be)

Execution order in next

First, the server side props are called, then the component's _app is parsing, and only then the HTML page is rendered. Server pre-rendering has occurred. The client receives the statics and begins to deploy the react environment, starting with the _app of the application and ending with the component

You can check the order of execution in the demo, there is the logic for logging these steps to the console

The mobx state hydration scheme in next.js application is presented below

Let's code

Preparation

The structure of the project will be as follows:

Defination stores

Let's init BooksStore (description in comments)



import { makeAutoObservable } from "mobx";
import { books, clientBooks } from "../utils";

class BooksStore {
  constructor() {
    // define and init observables
    this.books = [];
    this.searchParam = "";
    (make all object properties observables, getters computed, methods actions)
    makeAutoObservable(this);
  }

  setSearchParam = (param) => {
    this.searchParam = param;
  };

  setBooks = (books) => (this.books = books);

  get filteredBooks() {
    return this.books.filter((book) =>
      book.title.toLowerCase().includes(this.searchParam.toLowerCase())
    );
  }

  get totalBooks() {
    return this.books.length;
  }

  // if data is provided set this data to BooksStore 
  hydrate = (data) => {
    if (!data) return;
    this.setBooks(data.books);
  };

  // special method for demonstration
  fetchAndSetBooksOnClient = async () => {
    const newBooks = await Promise.resolve([...books, ...clientBooks]);
    console.log(newBooks);
    this.setBooks(newBooks);
  };
}

export default BooksStore

Note that on the client side we receive also Harry Potter books in fetch method. This is done to show the state of the store on the server side and on the client side.
We need to create a new store on every server request, and use one store on client side. Otherwise you will have problems with store
In next step we will provide store/index.js file:



// we need to enable static rendering for prevent rerender on server side and leaking memory
import { enableStaticRendering } from "mobx-react-lite";
import BooksStore from '../BooksStore'

// enable static rendering ONLY on server
enableStaticRendering(typeof window === "untdefined")

// init a client store that we will send to client (one store for client)
let clientStore

const initStore = (initData) => {
// check if we already declare store (client Store), otherwise create one
  const store = clientStore ?? new BooksStore();
// hydrate to store if receive initial data
  if (initData) store.hydrate(initData)

// Create a store on every server request
  if (typeof window === "undefined") return store
// Otherwise it's client, remember this store and return 
if (!clientStore) clientStore = store;
  return store
}

// Hoook for using store
export function useStore(initData) {
  return initStore(initData)
}

Connect with next.js

We need to create and provide _app component in pages directory. Let's do it



import { useStore } from "../store";
import { createContext } from "react";
import { getSide } from "../utils";

export const MobxContext = createContext();

const MyApp = (props) => {
  console.log("hello from _app - ", getSide());
  const { Component, pageProps, err } = props;
  const store = useStore(pageProps.initialState);
  return (
    <MobxContext.Provider value={store}>
      <Component {...pageProps} err={err} />
    </MobxContext.Provider>
  );
};

export default MyApp;

Example of fetching data on server



import { getSide, books } from "../utils";
import { useContext } from "react";
import { MobxContext } from "./_app";
import BookCard from "../components/BookCard";
import { observer } from "mobx-react-lite";

const IndexPage = () => {
  const {
    totalBooks,
    filteredBooks,
    setSearchParam,
    fetchAndSetBooksOnClient
  } = useContext(MobxContext);
  console.log("hello from Page component ", getSide());

  const handleOnInputChange = (e) => {
    setSearchParam(e.target.value);
  };

  return (
    <div>
      <h1>Books:</h1>
      <h3>TotalBooks: {totalBooks}</h3>
      <button onClick={fetchAndSetBooksOnClient}>Fetch on Client</button>
      <input placeholder="search" type="text" onChange={handleOnInputChange} />
      <hr />
      <div style={{ display: "flex" }}>
        {filteredBooks.map((book, index) => (
          <BookCard key={index} book={book} />
        ))}
      </div>
    </div>
  );
};

export const getServerSideProps = async () => {
  console.log("making server request before app", getSide());
  // here could be any async request for fetching data
  // const books = BooksAgent.getAll();
  return {
    props: {
      initialState: {
        booksStore: {
          books
        }
      }
    }
  };
};

export default observer(IndexPage);

And that's all. You can check mobx reactivity by adding new book (fetch on Client button) and searching book by title.

Possible mistakes

Mistakes:

Not create a new store on every server request (store/index:12) - on each request, the storage will be refilled with data
Forgot to do hydration (store/index:10) - non-compliance with content on server and client
Not using one store on client and server (MobxContext and useStore ONLY in _app component) - non-compliance with content on server and client

Links

I'm not the first to implement or explain this solution, I just tried to describe in more detail how it works and make an example more realistic
Offical github example
Another cool article

How to create map like in airbnb with react and google-maps

Alexander Dmitriev — Tue, 07 Sep 2021 13:45:26 +0000

Introduction

Disclaimer

English is not my native language, so there may be mistakes in the text, but I'm sure that the code can say a thousand times more than any of my words
I did not use react-map-libraries to make the solution as flexible and understandable as possible
This is the most simple implementation without deep styling, clustering and global-storage.
Source code is here - https://github.com/alex1998dmit/map_airbnb

Task

Let's assume that we need to create a map with displaying apartment cards on it as it is done on airbnb
The technology stack is next:

React & Typescript
Google map and @googlemaps/react-wrapper
MUI for style stuff

Implementation

Create our app

Everything is pretty trivial - you need to install the application using creat-react-app using TS



npx create-react-app my-app --template typescript

Install dependecies

For the application to work, we need MUI, @googlemaps/react-wrapper



npm install --save @material-ui/core @material-ui/icons @googlemaps/react-wrapper

Configure map

In this step we will integrate simple map to application. First of all you need to get google-map key - [https://developers.google.com/maps/documentation/javascript/get-api-key].
First of all let's create a Map component, which will be wrapper for google-maps.



import { useEffect, useRef, useState } from "react";
// we will use make styles for styling components, you can use another solutions (like css, sass or cssonjs
import { makeStyles } from "@material-ui/core";
// api mock data
import Apartments from "./apartments";

// Our component will receive center coords and zoom size in props
type MapProps = {
  center: google.maps.LatLngLiteral
  zoom: number
}

// map wrapper styles
const useStyles = makeStyles({
  map: {
    height: '100vh'
  }
})

function Map({ center, zoom }: MapProps) {
  const ref = useRef(null);
  const [map, setMap] = useState<google.maps.Map<Element> | null>(null)
  const classes = useStyles();

  useEffect(() => {
    // we need to save google-map object for adding markers and routes in future
    if (ref.current) {
      // here will connect map frame to div element in DOM by using ref hook
      let createdMap = new window.google.maps.Map(
        ref.current,
        {
          center,
          zoom,
          disableDefaultUI: true,
          clickableIcons: false
        }
      );
      setMap(createdMap)
    }
  }, [center, zoom]);

  // map will be connect to this div block
  return <div ref={ref} id="map" className={classes.map} />;
}

export default Map

Then let's modify App.tsx with:



import React, { ReactElement } from 'react';
import { Wrapper, Status } from "@googlemaps/react-wrapper";
import Map from './Map'

// Here we can add views when map will loading or failure
const render = (status: Status): ReactElement => {
  if (status === Status.LOADING) return <h3>{status} ..</h3>;
  if (status === Status.FAILURE) return <h3>{status} ...</h3>;
  return <></>;
};

function App() {
  if (!process.env.REACT_APP_GOOGLE_KEY) {
    return <h2>Add google key</h2>
  }
  return (
    <div className="App">
      <Wrapper apiKey={process.env.REACT_APP_GOOGLE_KEY} render={render}>
        <Map center={{ lat: 55.753559, lng: 37.609218 }} zoom={11} />
      </Wrapper>
    </div>
  );
}

export default App;

And result is:

Add custom overlays

The next step is to add a custom overlay. Why will we use overlays and not markers ? Because in my opinion it will be difficult to customize regular markers, according to the documentation we can change only icon image and label over it [https://developers.google.com/maps/documentation/javascript/custom-markers].
Let's create an OverlayContainer, which will be a wrapper for the components located on the map at certain coordinates.



import * as React from 'react'
import ReactDOM from 'react-dom';

// base function for creating DOM div node
function createOverlayElement() {
  const el = document.createElement('div');
  el.style.position = 'absolute';
  el.style.display = 'inline-block';
  el.style.width = '9999px';
  return el;
}

// Our OverlayComponent will recieve map, postion and children props - position is coords, map is google.map object and children is a component that will be render in overlay
export type Props = {
  map: google.maps.Map | null
  position: { lat: number, lng: number }
  children?: React.ReactChild
}

const OverlayContainer = (props: Props) => {
  const overlay = React.useRef<google.maps.OverlayView | null>(null)
  const el = React.useRef<Element | null>(null)

  // modified OverlayView from google.maps [https://developers.google.com/maps/documentation/javascript/reference/3.44/overlay-view?hl=en]
  class OverlayView extends window.google.maps.OverlayView {
    position: google.maps.LatLng | null = null;
    content: any = null;

    constructor(props: any) {
      super();
      props.position && (this.position = props.position);
      props.content && (this.content = props.content);
    }

    onAdd = () => {
      if (this.content) this.getPanes().floatPane.appendChild(this.content);
    };

    onRemove = () => {
      if (this.content?.parentElement) {
        this.content.parentElement.removeChild(this.content);
      }
    };

    draw = () => {
      if (this.position) {
        const divPosition = this.getProjection().fromLatLngToDivPixel(
          this.position
        );
        this.content.style.left = divPosition.x + 'px';
        this.content.style.top = divPosition.y + 'px';
      }
    };
  }

  React.useEffect(() => {
    return () => {
      if (overlay.current) overlay.current.setMap(null)
    }
  }, [])

  if (props.map) {
    el.current = el.current || createOverlayElement()
    overlay.current = overlay.current || new OverlayView(
      {
        position: new google.maps.LatLng(props.position.lat, props.position.lng),
        content: el.current
      }
    )
    overlay.current.setMap(props.map)
    return ReactDOM.createPortal(props.children, el.current);
  }
  return null
}

export default OverlayContainer

Creating Map Points and Apartment Cards

I will create a simple apartment card by using MUI-core and MUI-icons [https://material-ui.com/ru/components/cards/] [https://material-ui.com/ru/components/material-icons/].
Let's create ApartmentCard:



import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Card from '@material-ui/core/Card';
import CardActionArea from '@material-ui/core/CardActionArea';
import CardContent from '@material-ui/core/CardContent';
import CardMedia from '@material-ui/core/CardMedia';
import Typography from '@material-ui/core/Typography';
import AspectRatioIcon from '@material-ui/icons/AspectRatio';
import { Grid, IconButton } from '@material-ui/core';
import MeetingRoomIcon from '@material-ui/icons/MeetingRoom';
import KeyboardArrowUpIcon from '@material-ui/icons/KeyboardArrowUp';
import CloseIcon from '@material-ui/icons/Close';

const useStyles = makeStyles({
  root: {
    maxWidth: 230,
    position: 'relative',
    zIndex: 1001,
  },
  media: {
    height: 100,
  },
  close: {
    position: 'absolute',
    left: 0,
    top: 0,
    zIndex: 1001,
    background: 'white',
    width: '25px',
    height: '25px'
  }
});

type ApartmentCardProps = {
  image: string
  address: string
  area: number
  rooms_number: number
  floor: number
  floor_count: number
  rent: number
  handleClose: () => void
}

export default function ApartmentCard(props: ApartmentCardProps) {
  const classes = useStyles();
  return (
    <Card className={classes.root}>
       <IconButton className={classes.close} aria-label="close" onClick={props.handleClose}>
        <CloseIcon />
      </IconButton>
      <CardActionArea>
        <CardMedia
          className={classes.media}
          image={props.image}
          title="Contemplative Reptile"
        />
        <CardContent>
          <Typography variant="body2" component="h2">
            {props.address}
          </Typography>
          <Grid container spacing={1}>
            <Grid item container xs={6} spacing={1} alignItems='center'>
              <Grid item xs={8}><AspectRatioIcon /></Grid>
              <Grid item xs={4}>{props.area}</Grid>
            </Grid>
            <Grid item container xs={6} spacing={1} alignItems='center'>
              <Grid item xs={8}><MeetingRoomIcon /></Grid>
              <Grid item xs={4}>{props.rooms_number}</Grid>
            </Grid>
            <Grid item container xs={6} spacing={1} alignItems='center'>
              <Grid item xs={8}><KeyboardArrowUpIcon /></Grid>
              <Grid item xs={4}>{props.floor}/{props.floor_count}</Grid>
            </Grid>
            <Grid item container xs={12} spacing={1} alignItems='center' justifyContent="center">
              <Typography variant="body2" style={{ fontWeight: 600 }}>{props.rent} $</Typography>
            </Grid>
          </Grid>
          </Typography> */}
        </CardContent>
      </CardActionArea>
    </Card>
  );
}

And ApartmentPoint:



import { makeStyles } from "@material-ui/styles"

type ApartmentPonitProps = {
  price: number
  onClick: () => void
}

const styles = makeStyles({
  root:{
    background: 'white',
    borderRadius: '12px',
    padding: '8px',
    width: '60px',
    zIndex: 1000,
    position: 'relative'
  }
})

const ApartmentPoint = (props: ApartmentPonitProps) => {
  const classes = styles()
  return (
    <div className={classes.root} onClick={props.onClick}>
      {props.price} $
    </div>
  )
}

export default ApartmentPoint

We will use MapPoint like wrapper that will render ApartmentPoint or ApartmentCard:



import { useEffect, useRef, useState } from "react"
import ApartmentCard from "./ApartmentCard"
import ApartmentPoint from "./ApartmentPoint"

type MapPointProps = {
  image: string
  address: string
  area: number
  rooms_number: number
  floor: number
  floor_count: number
  rent: number
}

const MapPoint = (props: MapPointProps) => {
  const [opened, setIsOpened] = useState<boolean>(false)
  const handleOnOpen = () => setIsOpened(true)
  const handleOnClose = () => setIsOpened(false)
  const containerRef = useRef<HTMLDivElement>(null)

// Hook for handle outside click - simple implementation from stack overflow
  useEffect(() => {
    function handleClickOutside(this: Document, event: MouseEvent) {
      if (containerRef.current && !containerRef.current.contains(event.target as Node)) {
        setIsOpened(false)
      }
    }

    document.addEventListener("mousedown", handleClickOutside);
    return () => {
      document.removeEventListener("mousedown", handleClickOutside);
    };
  }, [containerRef]);

  return (<div ref={containerRef}>
    {opened ?
      <ApartmentCard
        image={props.image}
        address={props.address}
        area={props.area}
        rooms_number={props.rooms_number}
        floor={props.floor}
        floor_count={props.floor_count}
        rent={props.rent}
        handleClose={handleOnClose}
      /> :
      <ApartmentPoint
        price={props.rent}
        onClick={handleOnOpen}
      />}
  </div>)
}

export default MapPoint

And all together

Let's modify Map component by adding apartments points inside overlay containers:



import { makeStyles } from "@material-ui/core";
import { useEffect, useRef, useState } from "react";
import Apartments from "./apartments";
import MapPoint from "./MapPoint";
import OverlayContainer from "./OverlayContainer";

type MapProps = {
  center: google.maps.LatLngLiteral
  zoom: number
}

const useStyles = makeStyles({
  map: {
    height: '100vh'
  }
})

function Map({ center, zoom }: MapProps) {
  const ref = useRef(null);
  const [map, setMap] = useState<google.maps.Map<Element> | null>(null)
  const classes = useStyles();

  useEffect(() => {
    if (ref.current) { 
      let createdMap = new window.google.maps.Map(
        ref.current,
        {
          center,
          zoom,
          disableDefaultUI: true,
          clickableIcons: false
        }
      );
      setMap(createdMap)
    }
  }, [center, zoom]);

  return <div ref={ref} id="map" className={classes.map}>
    {Apartments.map((apartment, index) => (
      <OverlayContainer
        map={map}
        position={{
          lat: apartment.lat,
          lng: apartment.lng
        }}
        key={index}
      >
        <MapPoint
          image={apartment.image}
          address={apartment.address}
          area={apartment.area}
          rooms_number={apartment.rooms_number}
          floor={apartment.floor}
          floor_count={apartment.floor_count}
          rent={apartment.rent}
        />
      </OverlayContainer>
    ))}
  </div>;
}

export default Map

Apartments mock-data example(apartments.ts):



const Apartments = [

  {

    "id": 1,

    "image": "https://storage.yandexcloud.net/apartment-images/2.jpg",

    "area": 34.9,

    "kitchen_area": null,

    "address": "Novoalekseevskaya  4d4",

    "lat": 55.80562399999999,

    "lng": 37.641239,

    "rooms_number": 1,

    "bedrooms_number": 1,

    "restrooms_number": 1,

    "floor": 3,

    "floor_count": 14,

    "rent": 1500

  },

  {

    "id": 2,

    "image": "https://storage.yandexcloud.net/apartment-images/10_S939Rcf.jpg",

    "area": 47,

    "kitchen_area": null,

    "address": "Valovaya street 31",

    "lat": 55.66497999999999,

    "lng": 37.857464,

    "rooms_number": 1,

    "bedrooms_number": 1,

    "restrooms_number": 1,

    "floor": 6,

    "floor_count": 9,

    "rent": 2000

  },

  {

    "id": 3,

    "image": "https://storage.yandexcloud.net/apartment-images/07_uvV7gIk.jpg",

    "area": 40.9,

    "kitchen_area": null,

    "address": "academic Volgyn street 8A",

    "lat": 55.68271799999999,

    "lng": 37.544263,

    "rooms_number": 3,

    "bedrooms_number": 2,

    "restrooms_number": 1,

    "floor": 2,

    "floor_count": 5,

    "rent": 3000

  }

]

export default Apartments

Result

And our application will be:

P.S.

This is just the first article, in it I tried only to show how I work with google maps and react, in further articles there will be more logic and styling to get as close as possible to airbnb

How to create simple multi-step sign in with validation

Alexander Dmitriev — Thu, 18 Mar 2021 13:57:54 +0000

Introduction

Let's say you need to create a multi-step login form like in gmail. You are using react and the global storage (redux, mobx) for development, and you want to isolate components from each other in order to reuse them in the future. Besides this, you need to add validation to each step. In this article I will show the simplest and most correct, in my opinion, solution. Complete solution you can check here

Dependencies

First of all, we need a library for processing the form, in my opinion the best solution is react-hook-forms (https://react-hook-form.com/), the site describes in great detail why this is an excellent solution, i will add on my own that this library has powerful functionality (validations, quick integrations, controller mechanism) and good documentation.
For validation we will use the yup library, it's very powerful and popular library
For global storage i will use little-state-machine, because it's very simple solution and built on a flux architecture. But you can use redux or mobx
To integrate yup validation schemas with react-hook-form you will also need @hookform/resolvers package.

Let's code

Project Structure

The example uses the following project structure

steps <- here will be all form steps
- Congrats.js <- final step, if sign in is successed
- Email.js <- First step, enter email to continue sign in
- Password.js <- Second step, enter password to sign in
store
- actions.js <- include all actions, in my case only one for update form state
- index.js <- include app state, in my case only form state
App.js <- Main component, in my case include form logic
index
App.css <- App styles

About store

In the storage we will store information about the step of the form and email data. Let's add this information in store/index.js

const state = {
  step: "Email",
  email: ""
};

export default state;

Now let's add an action to update the form in actions.js

const updateFormState = (state, payload) => {
  return {
    ...state,
    ...payload
  };
};

export default updateFormState;

Let's add our storage to the application in index.js

import { StrictMode } from "react";
import ReactDOM from "react-dom";
import App from "./App";
import { StateMachineProvider, createStore } from "little-state-machine";
import store from "./store";

// create out global form state
createStore(store);

const rootElement = document.getElementById("root");
ReactDOM.render(
  <StrictMode>
    <StateMachineProvider>
      <App />
    </StateMachineProvider>
  </StrictMode>,
  rootElement
);

Base logic

The logic for switching the form, as well as its handlers, will be in App.js (for example only). We need to connect the store to the component in order to receive information about the form and update it.

import "./styles.css";
import { useStateMachine } from "little-state-machine";
import updateFormState from "./store/actions";
// Here we import form steps
import EmailStep from "./steps/Email";
import CongratsStep from "./steps/Congrats";
import PasswordStep from "./steps/Password";

export default function App() {
  // use hook for getting form state and actions
  const { state, actions } = useStateMachine({ updateFormState });
  // form handler for email step
  const emailFormHandle = ({ email }) => {
    actions.updateFormState({
      email: email,
      step: "Password"
    });
  };
  // form handler for password step
  const passwordFormHandle = ({ password }) => {
    actions.updateFormState({
      step: "Congrats"
    });
  };
  // sign out handler
  const signOutHandle = () => {
    actions.updateFormState({
      step: "Email"
    });
  };

  return (
    <div>
      {state.step === "Email" && (
        <EmailStep email={state.email} onSubmit={emailFormHandle} />
      )}
      {state.step === "Password" && (
        <PasswordStep onSubmit={passwordFormHandle} />
      )}
      {state.step === "Congrats" && (
        <CongratsStep email={state.email} onSignOut={signOutHandle} />
      )}
    </div>
  );
}

javascript
Form step components are isolated from each other as much as possible, and can be reused in other parts of the application. All you need is only add default values, if they exists (for email step) and form handler function.

Steps

Email

The email entry step is the first step for user authorization. It is necessary to check the validity of the entered email, and remember it in case the user at the step with the password wants to go back and change it a little. This may seem very far-fetched, but when there are a lot of inputs in form, saving their state is very useful to save the user's time. Code with comments over here:

import { useForm } from "react-hook-form";
// import our validation library
import * as yup from "yup";
// import integration library
import { yupResolver } from "@hookform/resolvers/yup";
import cn from "classnames";

// validation schema
const Schema = yup.object().shape({
  // it says here that we want to check the input with the name email for the fact that the user will pass a string and this string matches email, you can change validation error message by changing text in email function argument
  email: yup.string().email("Enter valid email please")
});

const EmailStep = (props) => {
  // get form on Submit handler from parent component
  const { onSubmit, email } = props;
  // apply validations schema to react-hook-form form object
  const { errors, register, handleSubmit } = useForm({
    resolver: yupResolver(Schema),
    // if user input his email before we can paste it to input as default value
    defaultValues: {
      email
    }
  });

  //  you can check all validations errors in console
  console.log(errors);
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <div className="form-group">
        <h2>Enter your email</h2>
      </div>
      <div className="form-group">
        {/* check validation errors */}
        {errors.email && (
          <h4 className="invalid-msg">{errors.email.message}</h4>
        )}
        <input
          // make input invalid if get email validation errors
          className={cn(errors.email && "input-invalid")}
          name="email"
          ref={register}
          placeholder="Your email"
        />
      </div>
      <div className="form-group">
        <button type="submit">Next</button>
      </div>
    </form>
  );
};

export default EmailStep;

What you need to know:

Form validation will be apply after user click on submit button (Next button in my case), but you can change this behavior in form options
All validation errors are in the error object, which is generated by react-hook-form, the key is input name (email) and value is validation message (Enter valid email please)
You can use the default validation rules by react-hook-form form object, without any libraries, but yup is more powerful and flexible package.

Password step

The last step in user authorization. The password should be more that 6 symbols length and include Latin letters. The code is below:

import { useForm } from "react-hook-form";
import * as yup from "yup";
import { yupResolver } from "@hookform/resolvers/yup";
import cn from "classnames";

const Schema = yup.object().shape({
  password: yup
    .string()
    .min(6, "Password is too short")
    .matches(/[a-zA-Z]/, "Password can only contain Latin letters.")
});

const PasswordStep = (props) => {
  const { onSubmit } = props;
  const { errors, register, handleSubmit } = useForm({
    resolver: yupResolver(Schema)
  });

  console.log(errors);
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <div className="form-group">
        <h2>Enter your password</h2>
      </div>
      <div className="form-group">
        {errors.password && (
          <h4 className="invalid-msg">{errors.password.message}</h4>
        )}
        <input
          className={cn(errors.password && "input-invalid")}
          name="password"
          type="password"
          ref={register}
          placeholder="Your password"
        />
      </div>
      <div className="form-group">
        <button type="submit">Sign In</button>
      </div>
    </form>
  );
};

export default PasswordStep;

Final step

And finally let's show user congrats message

const CongratsStep = (props) => {
  const { email, onSignOut } = props;

  return (
    <div className="form-group">
      <h2>
        Hello, {email}
        <button onClick={onSignOut}>Sign Out</button>
      </h2>
      <img src="https://i.giphy.com/6nuiJjOOQBBn2.gif" alt="" />
    </div>
  );
};

export default CongratsStep;

Conclusion

That's all. We create isolated form steps, add default values for email value, add validation rules to every form step and use for this most powerful and popular packages (excluding little-state-machine).
If you interested i can show this examples with typescript, MUI and mobx or redux packages

P.S.

This is my first article, and english is not my native language, hope everything was clear and you had a pleasant time :) If you have problems with understanding the text (due to the fact that I do not know the language well), you can always look at my code, it says much more than any words