DEV Community: Jucian0

Creating multi-step forms in ReactJS

Jucian0 — Wed, 25 Jan 2023 00:06:25 +0000

Hi folks, in this tutorial I want to show you how easily you can build a multi-step form using Createform library, and react-use-wizard. These forms are super useful when you want to save complicated forms or forms with many fields, so let's do that.

Get in touch with me on Twitter

Introduction

One of the challenges of building multi-step forms is how to manage the entire form across many step components that should keep parts of the same form, with the same validation schema, same submit button, and same state. By using another library's forms, you should use React's Context API, and the useContext hook.

By contrast, when you use the Createform, you do not need anything like this. You need to create one form and use it across all steps. Let's get started and figure out how it is possible.

Setting up the Application

Our first task is to prepare an application to develop your example of a multi-step form. This can be done with React + Vite, and with Codesandbox it will be easier since there are templates for React + Vite on Codesandbox.

Next, we need to install some dependencies in order to develop your example, so we will install Createform, react-use-wizard, and to save some time and have a beautiful result, we can add chakra-ui. Feel free to use another library or CSS library.

yarn add @createform/react react-use-wizard

yarn add @chakra-ui/react @emotion/react @emotion/styled framer-motion

Organizing the App Component

The first step is to organize the App.tsx file. We are about to add a title, and some stuff to make the layout look better.
In order to save time, we are already importing and add the PersonForm, this the component form that we are going to write in the next step.

import { ChakraProvider, Text, Box } from '@chakra-ui/react';
import { PersonForm } from './PersonForm/Form';

function App() {
  return (
    <ChakraProvider>
      <Box display="flex" justifyContent="center">
        <Text fontSize="2xl">Multi-step form example</Text>
      </Box>
      <PersonForm />
    </ChakraProvider>
  );
}

export default App;

Creating the form

Templates and components aren't the first things we need to think about, first, we need to think about what is really important, and what we are building. In order to build a multi-step form, we need to know how this form will work, if there are any rules or validations, how many fields it will have, and how many steps it will require before we develop the templates and components.

In this example, let's develop a form that submits information about a person. This form should have two steps:

The first step will deal with basic information about this person, like first name, last name, and age.
In the second step, we will deal with complementary information, such as city, street, and zip code.

Codding the usePersonForm Hook

To do that, we are going to create a file named usePersonForm.ts inside PersonForm directory:

import { createForm } from '@createform/react';

export const usePersonForm = createForm({
  initialValues: {
    firstName: '',
    lastName: '',
    age: null,
    address: {
      street: '',
      city: '',
      zipCode: '',
    },
  },
  ///mode: "onChange",
});

Codding the Form component

The Form component should keep all the steps and handle the submit and reset events. We will import the Wizard component from react-use-wizard and our step components, BasicInfoStep and AddressStep, which will handle the logic for each step of the form.

import { usePersonForm } from './usePersonForm';
import { Wizard } from 'react-use-wizard';
import { BasicInfoStep } from './BasicInfoStep';
import { AddressStep } from './AddressStep';

export function PersonForm() {
  const form = usePersonForm();

  function handleSubmit(e) {
    console.log(e);
  }

  function handleReset(e) {}

  return (
    <form
      onReset={form.handleReset(handleReset)}
      onSubmit={form.handleSubmit(handleSubmit)}
    >
      <Wizard>
        <BasicInfoStep />
        <AddressStep />
      </Wizard>
    </form>
  );
}

Codding steps

The components of the steps should contain the form fields, and manage them.

Codding BasicInfoStep

The first thing we need to do is import, and use the useWizard hook. This hook manages the Wizard step position. It could be more convenient if we could manage it from Form, as it could save some lines of code. Unfortunately react-use-wizard doesn't allow it.
As a second step, import the usePersonForm hook, as we are about to use it here, to register each field with the register function.
The last step is to add some buttons to navigate to the next form step and reset the form value.

import { Input, Text } from '@chakra-ui/react';
import { usePersonForm } from './usePersonForm';
import { Button, Stack } from '@chakra-ui/react';
import { useWizard } from 'react-use-wizard';

export function BasicInfoStep() {
  const { previousStep, nextStep } = useWizard();
  const { register } = usePersonForm();

  return (
    <Stack p={10}>
      <Text fontWeight={'bold'}>Basic Info</Text>
      <Input mt={5} placeholder="First name" {...register('firstName')} />
      <Input mt={5} placeholder="Last name" {...register('lastName')} />
      <Input mt={5} placeholder="Age" type="number" {...register('age')} />

      <Stack direction="row" spacing={4} justify="center" mt={5}>
        <Button type="reset">Reset</Button>
        <Button onClick={nextStep}>Next</Button>
      </Stack>
    </Stack>
  );
}

Codding AddressStep

Again, in the first, we need to import and use the useWizard hook, which manages the Wizard step position.
This step involves importing the usePersonForm hook, which will be used to register every field with the register function.
The last step is to add some buttons for submitting the form, resetting the form's value, and for navigating to the previous form step.

import { Input } from '@chakra-ui/react';
import { Button, Stack, Text } from '@chakra-ui/react';
import { usePersonForm } from './usePersonForm';
import { useWizard } from 'react-use-wizard';

export function AddressStep() {
  const { previousStep } = useWizard();
  const { register } = usePersonForm();

  return (
    <Stack p={10}>
      <Text fontWeight={'bold'}>Address</Text>
      <Input mt={5} placeholder="Street" {...register('address.street')} />
      <Input mt={5} placeholder="City" {...register('address.city')} />
      <Input mt={5} placeholder="Zip Code" {...register('address.zipCode')} />

      <Stack direction="row" spacing={4} justify="center" mt={5}>
        <Button onClick={previousStep}>Previous</Button>
        <Button type="reset">reset</Button>
        <Button type="submit">Submit</Button>
      </Stack>
    </Stack>
  );
}

This is the final file structure of the example:

You can see the result in the Codesandbox

Conclusion

Building a multi-step form can be easy if you use the right tools to build it. In this tutorial, I showed you how Createform can do that easily. Using Createform you can continue on, and create more complex forms, whether they are multi-step or not.

In the next post I'm going to show you, how to add some validation in this form.

The ultimate form library for react you'll ever need

Jucian0 — Sat, 21 Jan 2023 02:19:22 +0000

Hello everyone, in this tutorial I'm going to show how to create forms easily using Createform package, I hope you find this article useful.

Get in touch with me on Twitter

With the Createform library, creating and managing forms in React has never been easier. The library provides a simple and intuitive API for handling form submissions, validation, and more.

In this tutorial, we will go through the steps of creating and using a form hook with the Createform library. We will also cover how to validate form fields using the Yup library and how to display validation errors to the user.

Installation

To install Createform in your project, use npm or yarn:

npm install @createform/react

yarn add @createform/react

Repository: take a look at the GitHub repository

1. Creating the Form Hook

The first step in using Createform is to create a form hook. This can be done by calling the createForm function and passing in an object with an initialValues property. The initialValues property should contain an object with the keys and initial values of the fields in your form.

For example, the following code creates a useLoginForm hook with email and password fields:

const useLoginForm = createForm({
  initialValues: {
    email: '',
    password: '',
  },
});

Yeah, this approach look like zustand.

2. Using the Form Hook in a Form Component

Once you have created the form hook, you can use it in your form component. The hook provides several functions that you can use to manage the form, including handleSubmit, register, touched, and errors.

The register function should be used to register your form fields with the form. It takes the name of the field as an argument and should be passed as the ref prop of the form field element.

For example, the following code creates a login form that uses the useLoginForm hook:

const LoginForm = () => {
  const { handleSubmit, register } = useLoginForm();

  function onSubmit(values) {
    console.log(values);
  }

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input type="email" {...register('email')} />
      <input type="password" {...register('password')} />
      <button type="submit">Submit</button>
    </form>
  );
};

When the form is submitted, the onSubmit function will be called with an object containing the values of the email and password fields.

3. Validating Form Fields

You can also use validationSchema to validate the form field values before submitting the form.

const validationSchema = yup.object().shape({
  email: yup.string().email().required(),
  password: yup.string().min(6).required(),
});

const useLoginForm = createForm({
  initialValues: {
    email: '',
    password: '',
  },
  validationSchema,
});

In this example, we are using the Yup library to create a validationSchema and passing it to the createForm function. It will validate the email field as required and with email format and the password field as required with a minimum of 6 characters.

In the form component:

const LoginForm = () => {
  const { handleSubmit, register, errors, touched } = useLoginForm();

  function onSubmit(values) {
    console.log(values);
  }

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input type="email" {...register('email')} />
      {touched.email && <p>{errors.email}</p>}
      <input type="password" {...register('password')} />
      {touched.password && <p>{errors.password}</p>}
      <button type="submit">Submit</button>
    </form>
  );
};

Note: You can also use Zod instead of Yup.

Conclusion

The Createform library has many others resources, and you can find them in the documentation, also the library provides a simple and intuitive way to create and manage forms in React. It allows you to easily register form fields, handle form submissions, and validate form field values. By using the validationSchema feature and libraries like Yup or Zod, you can easily implement validation for your forms and display errors to the user. With the Createform library, creating and managing forms in React becomes a breeze. You can also customize the form by adding additional form fields or custom validation logic.

Builder pattern: validation class

Jucian0 — Fri, 03 Jun 2022 18:40:52 +0000

Hi everyone, today I'm going to talk about the Builder pattern. The Builder pattern is a design pattern that allows us to create complex objects with a simple interface. Maybe you don't know what a builder pattern is, but I guarantee that this pattern is extensively used in many libraries and frameworks, and we will understand and implement it in this article, building a validation class.

Get in touch with me on Twitter

How Builder pattern works?

The intent of the Builder design pattern is to separate the construction of a complex object from its representation. By doing so, the same construction process can create different representations.

Builder pattern is a creation pattern that allow us to create complex objects step by step. The idea is to have some methods to create parts of that object.

Imagine that we want to create a house, we will need to create methods to build walls, floors, doors, windows, etc, something like that.

const house = new HpHouseBuilder();

house
  .buildWalls()
  .buildFloors()
  .buildDoors()
  .buildWindows()
  .buildRoof()
  ...

Builder Implementation

In this example, we will create a validation class to validate strings using typescript, feel free to use your favorite programming language. We will make simple validations, like checking if the string is empty, max and min length, and regex.

export class StringValidator {
  private messages: Array<string>;
  constructor(private value: string) {}

  isEmpty(message: string) {
    if (this.value.trim().length === 0) {
      this.messages.push(message);
    }
    return this;
  }

  maxLength(max: number, message: string) {
    if (this.value.length > max) {
      this.messages.push(message);
    }
    return this;
  }

  minLength(min: number, message: string) {
    if (this.value.length < min) {
      this.messages.push(message);
    }
    return this;
  }

  is(pattern: RegExp, message: string) {
    if (!pattern.test(this.value)) {
      this.messages.push(message);
    }
    return this;
  }

  build(): Array<string> {
    return this.messages;
  }
}

This is a very simple example of a validation class, but I believe that it is a good example to show how the builder pattern works. Below, you can see a brief explanation about our implementation.

Create a class called StringValidator with a property called messages to keep all the messages. This is the messages that should be displayed when the validation fails.
Create a constructor that receives a string as a value.
Create a method called isEmpty that receives a string, if the value is empty, it will add the message to the messages array, and return the instance.
Create a method called maxLength that receives a number and a string, if the value is greater than the number, it will add the message to the messages array, and return the instance.
Create a method called minLength that receives a number and a string, if the value is less than the number, it will add the message to the messages array, and return the instance.
Create a method called is that receives a regex and a string, if the value doesn't match the regex, it will add the message to the messages array, and return the instance.
Create a method called build that returns the messages array.

In order to build the messages array, we need to return the instance by return this, so we can chain the others methods.

Use Case

In your use case, we will need to create a simple app with a small form, I'm going to use React, feel free to use your favorite framework.

The first step is to create an app, we can do that using CRA, with the following command:

npx create-react-app validation-app

Okay, now we have a new app, let's go to the src folder and create a validation class. You can put it in a different folder, but I'm going to put it in the src/validations folder.

cd validation-app
touch src/validations/ValidationString.ts

With your favorite text editor, open the file and write the code above, in the implementation section.

The next step is to create a component that will be used to display the validation messages, let's create a component called ValidationMessage in the src/components folder.

import React from "react";
import { StringValidator } from "./validations/ValidationString";

function ValidationMessage(props: { messages: Array<string> }) {
  return (
    <div>
      {props.messages.map((message, index) => (
        <p key={index}>{message}</p>
      ))}
    </div>
  );
}

A brief explanation about the component:

We are importing the StringValidator class from the src/validation/ValidationString.ts.
We are creating a component called ValidationMessage that receives a props object with a messages array.
As we have a messages array, we need to map it to create a list of messages.

Let's go to the next step, the form component. We need to create a simple form with just one input, and a button. Let's create a component called Form in the src/components folder.

import React from "react";
import { StringValidator } from "./../validations/ValidationString";
import { ValidationMessage } from "./ValidationMessage";

const makeValidation = (value: string) =>
  new StringValidator(value)
    .maxLength(8, "Max length is 8.")
    .is(/[A-Za-z]/, "Should has almost one latter.")
    .build();

export function Form() {
  const [value, setValue] = React.useState("");
  const [validation, setValidation] = React.useState(makeValidation(value));

  const onChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    setValue(event.target.value);
  };

  const onSubmit = (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    setValidation(makeValidation(value));
    /**
     * Do something with the value
     **/
  };

  return (
    <form onSubmit={onSubmit}>
      <input type="text" value={value} onChange={onChange} />
      <ValidationMessage messages={validation} />
      <button type="submit">Submit</button>
    </form>
  );
}

A brief explanation about the component implementation:

Importing the ValidationMessage component from the src/components/ValidationMessage.ts.
We are importing the StringValidator class from the src/validation/ValidationString.ts.
Creating a function called makeValidation that receives a string and returns a new instance of the StringValidator.
Using the React.useState hook to create a state variable called value and a state variable called validation that will hold the validation messages.
We have a function called onChange that receives an event and updates the value and the validation messages.
onSubmit is the function that will be called when the form is submitted.
In the last part, we are just returning the form template.

Links

You can see the result of this use case here: Builder pattern use case

If you are interested to see the code of this example, you can check it here: Builder pattern code

Conclusion

In this article, we learned how to implement the builder pattern in a simple way, and we used it in a React application. Builder pattern is extensively used in many libraries and frameworks, some of them are: Yup library validation, and Redux toolkit.

I hope you enjoyed this article, and if you have any questions, please don't hesitate to contact me.

How I became a software developer

Jucian0 — Thu, 17 Mar 2022 01:25:24 +0000

I was born in Paraguay, a small country close to Brazil, where my parents worked for a long time as cotton, rice an beans farmers. When I was eight years old, I joined them as a farm worker, and everything was going well, but unfortunately our luck was about to change. Planting cotton requires a very specific quantity of rain, if you have much, you can lose everything. It began to rain, and it didn't stop for several months, we lost everything. We were devastated!

Get in touch with me on Twitter

How one question changed my life.

My father found me crying in the middle of the cotton field, and he asked me, "Why are you crying? What is wrong with you?" I answered him, "What are we doing were? We have lost everything."

This caused, something to change in my father's mind and he decided to move our family to Brazil. After arriving in our new country, parents got work and my siblings and I had a opportunity to study. After years our lives got much better, but in my mind and my parent's minds, school and college were just optional. It's much easier to change your financial situation than to change your thinking. Before starting work as software developer, I worked as a manual laborer, topographer assistant, and a metallurgy professional for ten years.

How a blog changed my life

With my love of computers and a great curiosity for how things work, I decided to start a blog about technology, computers, and other topics. Writing about technology made knew new people, and some software developers, that was my first experience with programming. Eventually I decided to improve my blog, and add more features. But I didn't know how to do that, then some new friends teach me my first programming lessons. My first programming language was PHP, and I was very happy with it.

How my wife changed my life.

Maybe the title of this publication should be "How my wife changed my life", before her I was a little afraid to try new things. As she encouraged me to continue studying and to reach for what I wanted to do. As I have always liked computers and math, but I never thought that I could do them professionally, I decided to go to college and become a software developer.

How college changed my life

Besides learning many new things, college helped me feel more confident about myself and during my time there, I realized that there were very little differences between me and other people. In fact, if I worked hard enough, I could do exactly what I wanted to do.

Cultural differences can make you fell less confident and more insecure.

How starting to work as a software developer changed my life

Even after I reached my goal of becoming a software developer, I realized that there were many other things that I needed to change in my life. The most important of these was, how I saw the world and the people in it, and how can I relate to them.

Becoming more culturally aware and tolerant of other people and cultures has changed me and made me more human. I have had the opportunity to work with, and learn from, some amazing (and some not so amazing) people every day, but even with those that tested me, I learned at least one thing with every one of them.

Conclusion

I've learned that changing your mind is much harder than changing your financial situation, so the most important thing that we can do for ourselves is to improve ourselves as humans. We need to open our minds and be kind.

Another lesson that I learned was to "do your best" "and to trust people". I could not have changed my life if I had no trusted people along the way. If you don't know something, don't hesitate to ask. People want to help you for many reasons, but they need to know that you need help first.

My life changed substantially when I realized that I needed to exceed my own expectations. I remember when I was at college and had some doubts about a course I was taking and decided to ask my professor about them. He said "I have 10 minutes from here to university park." in the past I would never have taken him up on his offer, but i did and used those 10 minutes to ask all the questions I had.

If you want to go where others don't go, do what others don't do.

Pub-Sub pattern: a brief explanation

Jucian0 — Fri, 10 Sep 2021 15:59:00 +0000

Hello everyone, in the last post I talked about the Observable pattern, and today I'm going to talk about another patter called Pub-Sub. There are some difference between Pub-Sub and Observable, and my plan is to explain these differences and show you how Pub-Sub works, and how you can implement it using javascript.

Get in touch with me on Twitter

How `Pub-Sub` works?

This pattern helps you when you want to dispatch an event; and you want the components that are interested in this event to know what is happening, Observable can only dispatch one event for everyone, but Pub-Sub can dispatch many events, and who are interested should subscribe in a specific event.

An Analogy

Ford, Volkswagen, and BMW were interested in advertising new positions in their factories and decided to announce them in the newspaper.

Ford's announcement: At Ford, we are very happy to announce a new senior position available. Please apply for this opportunity, and come and work with us, ford@ford.com

Volkswagen's announcement: At Volkswagen, we are very happy to announce a new senior position available. Please, apply for this opportunity, and come and work with us, volkswagen@volkswagen.com

BMW's announcement: At BMW, we are very happy to announce a new senior position available. Please apply for this opportuninty, and work with us, bmw@bmw.com

After a few days, many candidates applied for the opportunities and each company answered their candidates by e-mail, giving them more details about the job.

Ford email: At Ford, we are very pleased that you are interested in our new position. Thank you for applying; and we will be in contact soon.

Volkswagen email: At Volkswagen, we are very pleased that you are interested in our new position. Thank you for applying; and we will be in contact soon.

BMW email: At BMW, we are very pleased that you are interested in our new position. Thank you for applying; and we will be in contact soon.

So, at the end of the process, every company sent a message to employees subscribed in their opportunity, saying about the end of the process.

Applying the analogy

Let's understand how Pub-Sub works, the first thing that we need to understand is that the newspaper was the Pub-Sub, the announcement was the event, the email was the message, the company was the publisher, and the candidate was the subscriber.

After the candidate's subscriptions, the companies dispatched the event, and the candidates subscribed in the event received the message. This example shows us that the Pub-Sub is not about just one event, but many events, and the subscriber should subscribe to a specific event.

So, now we know how Pub-Sub works, we can go on and implement it using javascript.

Implementing `Pub-Sub` with javascript

The first thing that we need to implement is the PubSub class, this class will be the base of our implementation. So, let's do it:

class PubSub {
  constructor() {
    this.subscribers = {};
  }

  subscribe(event, fn) {
    if (Array.isArray(this.subscribers[event])) {
      this.subscribers[event] = [...this.subscribers[event], fn];
    } else {
      this.subscribers[event] = [fn];
    }
    return () => {
      this.unsubscribe(event, fn);
    };
  }

  unsubscribe(event, fn) {
    this.subscribers[event] = this.subscribers[event].filter(
      (sub) => sub !== fn
    );
  }

  publish(event, data) {
    if (Array.isArray(this.subscribers[event])) {
      this.subscribers[event].forEach((sub) => {
        sub(data);
      });
    }
    return false;
  }
}

export default new PubSub();

The constructor of the class will create an empty object, and this object will be the base of our implementation, and we will store all the subscribers in this object.
The subscribe method will receive an event and a function, and we will store the function in the subscribers object, every event should be a property of this object and the value of this property should be an array of functions. After that, we will return a function that will filter the function that we want to remove from the subscribers array.
The unsubscribe method will receive an event and a function, and we will select the property of the subscriber object that matches the event received as a argument, and we will filter the function that we want to remove from the subscribers array.
The publish method will receive an event and data, and we will iterate over the subscribers object, and for each subscriber that matches the event received, we will call the function with the data.
The export default new PubSub(); will create a new instance of the class, and we will export it.

Implementing a use case

Now that we have the PubSub class, we can implement our use case, and we will create a basic use case. Using some html elements and javascript we will create a simple page to show us the subscription, unsubscription, and publishing of events working.

import "./styles.css";
import PubSub from "./PubSub";

const firstInput = document.getElementById("first-input");
const secondInput = document.getElementById("second-input");

const firstSubscriberBtn = document.getElementById("first-subscriber-btn");
const secondSubscriberBtn = document.getElementById("second-subscriber-btn");
const firstUnSubscriberBtn = document.getElementById("first-un-subscriber-btn");
const secondUnSubscriberBtn = document.getElementById(
  "second-un-subscriber-btn"
);

const textFirstSubscriber = document.getElementById("first-subscriber");
const textSecondSubscriber = document.getElementById("second-subscriber");

const firstText = (e) => (textFirstSubscriber.innerText = `${e}`);
const secondText = (e) => (textSecondSubscriber.innerText = `${e}`);

firstInput.addEventListener("input", (e) =>
  PubSub.publish("first-event", e.target.value)
);

secondInput.addEventListener("input", (e) =>
  PubSub.publish("second-event", e.target.value)
);

firstSubscriberBtn.addEventListener("click", (e) => {
  e.preventDefault();
  PubSub.subscribe("first-event", firstText);
});

firstUnSubscriberBtn.addEventListener("click", (e) => {
  e.preventDefault();
  PubSub.unsubscribe("first-event", firstText);
});

secondSubscriberBtn.addEventListener("click", (e) => {
  e.preventDefault();
  PubSub.subscribe("second-event", secondText);
});

secondUnSubscriberBtn.addEventListener("click", (e) => {
  e.preventDefault();
  PubSub.unsubscribe("second-event", secondText);
});

The firstInput will listen for the input event, and when it happens, it will publish the first-event event, and the secondInput will listen for the same event, and when it happens, it will publish the second-event event.
The firstSubscriberBtn will listen for the click event, and when it happens, it will subscribe the first-event event, and the firstUnSubscriberBtn will listen for the click event, and when it happens, it will unsubscribe the first-event event.
The secondSubscriberBtn will listen for the click event, and when it happens, it will subscribe the second-event event, and the secondUnSubscriberBtn will listen for the click event, and when it happens, it will unsubscribe the second-event event.
The textFirstSubscriber will listen for the first-event event, and when it happens, it will update the text with the value of the event, and the textSecondSubscriber will listen for the second-event event, and when it happens, it will update the text with the value of the event.
The firstInput will listen for the input event, and when it happens, it will publish the first-event event, and the secondInput will listen for the same event, and when it happens, it will publish the second-event event.

You can see the result of the use case working in the link below:
https://codesandbox.io/s/Pub-Sub-7qvkr?from-embed

Conclusion

Even if you don't know how to implement it, it's very important to understand how Pub-Sub works, as Pub-Sub is a very common pattern in many programming languages and libraries.

I hope that you found this article helpful, and if you have any questions, please let me know in the comments section.

Patterns: Observable pattern

Jucian0 — Mon, 26 Jul 2021 13:01:20 +0000

Observable pattern

In this post, I will explain a very common pattern used extensively by software developers, even though new developers may not know how to implement it or how it works, they're probably still using it, as Observable pattern is very common in libraries.

Get in touch with me on Twitter

This pattern is very useful when there are many software components attached to a specific event. In that case, those components just need to subscribe to this event to be notified when the event happens.

An analogy

When I discovered this pattern, I read a lot of analogies trying to explain how Observable pattern works, the most interesting of all was the trip raffle.

A company called Atric wanted to give a trip to one of their employees, so the company created a raffle. The company released it like this:

Whoever comes up with the funniest sentence about a travelling will win a trip to Petar SP. The sentences should be emailed to raffle@company.com, and the winner will be notified by email in three weeks.

Many employees wrote the sentences, and after three weeks the employees received an e-mail saying who was won the raffle:

Thanks for your participation, and we received many subscriptions, unfortunately, your entry was not the winning contribution.
The winner was Juciano Barbosa for his sentence, "Bringing a snake on a airplane os not a good idea!".

Applying the analogy

This is a simple explanation of how the Observable pattern works, as when the company sent the email, every participant was notified.

The raffle was an Observable and the participants were observers, the company used internal communication to recruit some participants, and after that, the company used email to notify the participants of the outcome.

Basic requirements?

To apply this tutorial you will need to have:

Basic knowledge of Javascript or another programing language.

Let's start

In this tutorial, I use Javascript, but feel free to use another language. We can also use an approach more function, so please let me know if this interests you, but for now, we will implement using a class approach.

class Observable {
  constructor() {
    this.observers = [];
  }

  subscribe(fn) {
    this.observers = [...this.observers, fn];
    return () => {
      this.unsubscribe(fn);
    };
  }

  unsubscribe(fn) {
    this.observers = this.observers.filter((observer) => observer !== fn);
  }

  notify(data) {
    this.observers.forEach((observer) => {
      observer(data);
    });
  }
}

export default new Observable();

constructor - Start by creating a class named Observable and in the constructor, assign an empty array in the observers property. The observers property will keep the observable list.
subscribe - After that, create a method named subscribe, this method receives a function as an argument, and this argument will be an observable. After that, use the spread operator to assign a new array with the function received as an argument into the observers property. The return function will be responsible for removing the observer that we just assigned into subscribers.
unsubscribe - This method is responsible for removing a certain observer. The unsubscribe method receives a function and verifies if this function is present in the observers list, and if it is, removes it.
notify - This method receives data as an argument, iterates the observers list, and passes the data as an argument into every observer.
Finally, return an Observable object.

Using it

This is a simple implementation of the Observable pattern, but we need to write a case of use to see it working. The code below is not a common case of use, but makes it easier for us to figure out how it works.

import Observable from "./Observer";

// selecting HTML elements
const input = document.getElementById("text-input");
const firstSubscriberBtn = document.getElementById("first-subscriber-btn");
const secondSubscriberBtn = document.getElementById("second-subscriber-btn");
const firstUnSubscriberBtn = document.getElementById("first-un-subscriber-btn");
const secondUnSubscriberBtn = document.getElementById(
  "second-un-subscriber-btn"
);
const textFirstSubscriber = document.getElementById("first-subscriber");
const textSecondSubscriber = document.getElementById("second-subscriber");

//observers are inserting into text element the value received
const firstText = (e) => (textFirstSubscriber.innerText = `${e}`);
const secondText = (e) => (textSecondSubscriber.innerText = `${e}`);

// event source, notifying all observer
input.addEventListener("input", (e) => Observable.notify(e.target.value));

// subscribing
firstSubscriberBtn.addEventListener("click", (e) => {
  e.preventDefault();
  Observable.subscribe(firstText);
});

secondSubscriberBtn.addEventListener("click", (e) => {
  e.preventDefault();
  Observable.subscribe(secondText);
});

// unsubscribing
firstUnSubscriberBtn.addEventListener("click", (e) => {
  e.preventDefault();
  Observable.unsubscribe(firstText);
});
secondUnSubscriberBtn.addEventListener("click", (e) => {
  e.preventDefault();
  Observable.unsubscribe(secondText);
});

Start by selecting some HTML elements, like a button and text input.
firstText and secondText are the observers that receive a certain text value and insert it into the text element using innerText resource.
In the next step add an event listener for input event type, this listener should be the Observable.notify method. If some input event happens, the notify method will notify every observer.
To try and make a dynamic subscription, use the click event to subscribe and unsubscribe on Observable.
Finally, we can subscribe and unsubscribe on Observable by clicking on the subscribe or unsubscribe buttons.

This is the end of my Observable pattern implementation; you can see the result in: CodeSandbox

Conclusion

Now, we have an idea of how it works, and you may have figured out that some libraries use this pattern, or something similar, to implement their solution. Suppose that every observer is a component and the notify is a kind of a dispatch, we can build a rudimentary state management. Please read my post, Implementing Redux Pattern, if you are interested in knowing how to do it.

For more information on this topic, you can try RXJS, this library makes the process effortless, and you can do many things with operators.

Even if you don't need this pattern in your projects, it's good that you understand how it works because many libraries use it to implement their solutions.

Reactjs: Debounce forms

Jucian0 — Thu, 01 Jul 2021 17:51:44 +0000

Do you really need a form library to build forms in React?

Hello friends, today I will continue my post on forms. This is the second post on the subject and I hope that it teaches you something new. In the last post I showed to you an example of controlled form implementation, and today I want to show you another example focused on performance as we develop a debounce form.

Get in touch with me on Twitter

If you are interested in the last post, you can read it here

Controlled forms are the most popular form implementation and we can find it in many libraries, one example is Formik, however controlled form is not the only way that you can build forms with React, you can use an uncontrolled form, or debounce form. Here's a brief explanation about it:

Controlled form - controlled forms mean that every time an input event happens, the component that this state belongs will be rendered again.
Uncontrolled form - when we use uncontrolled forms we don't have any state to keep the input value, and we just take the input value when we want to use it.
Debounce form - debounce forms mix controlled and uncontrolled approaches. It's necessary to use a state to keep the input value, but this value is changed only after the last input event happens.

Debounce function forces a function to wait a certain amount of time before running again. The function is built to limit the number of times a function is called.

Let's start

First of all, you should clone the last example here

Creating the form component

We already have a form component, as we developed it in the last post, so we don't have to do a lot of things, let's do that:

Open the project that you already cloned and copy the folder ControlledForm and rename to DebounceForm, and import this new component to use inside the App.



function App() {
  return (
    <div className="container-fluid">
      <div className="row">
        <div className="col-lg-6 col-md-6">
          <DebounceForm />
        </div>
        <div className="col-lg-6 col-md-6">
          <FormControlled />
        </div>
      </div>
    </div>
  );
}

Debounce function

Debounce function is a higher-order function

But, what does that means?

Higher-order function is extensively used in javascript, you are probably using it even if you don't know it.

Higher-Order function is a function that receives a function as an argument or returns the function as output.

Okay, if you are ready we can start. The first thing that we should do is to create a function named debounce, this function will reduce the number of times that we change the form state and the number of renders of the component. Below, we can see my implementation:



export function debounce(fn, wait, immediate) {
  let timeout;

  return (...args) => {
    const context = this;

    const later = () => {
      timeout = null;
      if (!immediate) fn.apply(context, args);
    };

    const callNow = immediate && !timeout;
    clearTimeout(timeout);
    timeout = setTimeout(later, wait);

    if (callNow) {
      fn.apply(context, args);
    }
  };
}

So, a debounce function is a function that returns another function, and that returned function runs the function that we pass as a parameter into debounce function.



const callbackFunction = () => {}; // it will be executed into returned function
const time = 3000; // it's the delay time

const returnedFunction = debounce(callbackFunction, time);

returnedFunction(); // callbackFunction know my arguments

Using debounce function into Input component

I will use debounce function with onChange event from input, and add 500 milliseconds. This way the form state will only change after 500 milliseconds when the user stops writing.



import React, { useState, useRef, useEffect, useCallback } from "react";
import { debounce } from "../Debounce";

function Input({ error, label, onChange, ...rest }) {
  const [touched, setTouched] = useState(false);
  const inputRef = useRef(null);
  const debounceInput = useCallback(debounce(onChange, 500), [debounce]);
  const blurInput = useCallback(() => setTouched(true), [setTouched]);

  useEffect(() => {
    inputRef.current.addEventListener("input", debounceInput);
    inputRef.current.addEventListener("blur", blurInput);

    return () => {
      inputRef.current.removeEventListener("input", debounceInput);
      inputRef.current.removeEventListener("blur", blurInput);
    };
  }, [blurInput, debounceInput, inputRef]);

  return (
    <>
      <label htmlFor={rest.name}>{label}</label>
      <input className="form-control" {...rest} ref={inputRef} />
      <span className="text-danger">{touched && error}</span>
    </>
  );
}
export default Input;

Code explanation

The first thing that we should discuss is why I'm using useCallback. UseCallback is used when you want to memorize a function, this hook receives a function as an argument and memorizes it, and this hook will return the same function while the dependencies don't change. When some dependency is changed a new function is returned. But why do we need to do this? The functions inside a component will change every time that the component is rendered, so when I use useCallback I know that the function returned is the same, unless some dependency is changed.

The next thing we should understand is that:

A common mistake is to think functions shouldn’t be dependencies.

If a function is used inside a useEffect we should pass this function as a dependency, and we know that the function will change in every component render, for this reason, we use useCallback, if we don't, our component will be rendered unnecessary.

In the first part of our component code, we are using some hooks; useState to save blur event state, and useRef to create a reference to use in the input element. After that we use useCallback with debounce function and setTouched.

useEffect receives blurInput, debounceInput, inputRef as dependencies inside of the function that we use with useEffect. We use the input reference to register the functions to deal with input and blur events, after that, we just return a function that should remove the event listener functions.

Improving useValidation hook

useValidation is a hook that returns an object with errors and a property to show us if the form values are valid or not.



import { useState, useEffect, useCallback } from "react";
import { ValidationError } from "yup";

function useValidation(values, schema) {
  const [errors, setErrors] = useState({});
  const [isValid, setIsValid] = useState(false);

  const validate = useCallback(async () => {
    try {
      await schema.validate(values, { abortEarly: false });
      setErrors({});
      setIsValid(true);
    } catch (e) {
      if (e instanceof ValidationError) {
        const errors = {};
        e.inner.forEach((key) => {
          errors[key.path] = key.message;
        });
        setErrors(errors);
        setIsValid(false);
      }
    }
  }, [schema, values]);

  useEffect(() => {
    validate();
  }, [validate]);

  return { errors, isValid };
}

export default useValidation;

Code explanation

In this code I use useEffect to keep the errors object and isValid property, by default isValid should be false, because when we start our form we don't have any values.

Added a function named validate, this function should receive the form values and pass this value to object validation. If the form state has a valid value, we set an empty object in the errors state and true in isValid property, but if it has any error, we need to know if is an error of validation (ValidationError instance), before setting them in the errors state and false in isValid.
To update the errors every time that form is changed, we pass the form state as a dependency in the useEffect hook.
Added object error with the specific property in every field.

I use useCallback with validate function and pass this function as a useEffect dependency.

Finally, I return an object with the form errors and one property that shows me if the form is valid or not.

Last change

Now we need to make just two small changes in DebounceForm component:

The first change is to adjust the object returned by useValidation, now we want to know if the form is valid, so we just need to take this property.



const { errors, isValid } = useValidation(form, FormValidations);

The second small change is to use isValid in the submit button.



<div className="form-group">

  <button

    type="button"

    className="btn btn- 

    primary"

    disabled={!isValid}

  >

    Submit

  </button>

</div>

Comparing the forms

I will now compare the number of renders of every component, which you can do with the React extension for browsers. I press F12 and after that profiler and Start Profiling.

DebounceForm results:

ControlledForm results:

In the first example, we have 3 renders, and in the second we have 13 renders, it's a big difference.

I'm not saying that this is the better approach, in many cases, this will not make any sense, so you should discover for yourself what is best for your application.
I hope that this post helped you to figure that out!

Github repository: https://github.com/Jucian0/react-form-debounce

Codesandbox
https://codesandbox.io/s/github/Jucian0/react-form-debounce/tree/master/?from-embed

Reactjs: Building forms

Jucian0 — Tue, 15 Jun 2021 17:32:38 +0000

Do you really need a form library to build forms in React?

Hello friends, today I will talk to you about forms in React, and tell you how my first experience building form in React was.

Get in touch with me on Twitter

My relationship with React when I created forms was a love-hate relationship, because React doesn't tell you how everything should work. Another reason was that Angular has a powerful solution to build forms (yeah, I've worked with Angular before), and honestly, I never found anything as good as reactive forms in React ecosystem. But everything changed when the React team introduced Hooks API, after that the process to create forms became very simple, and I started to think if it was really necessary to use a form library to implement forms in React.

In this post, I will show you an easy way to build forms without any form library, and at the end of this post you will decide if it's really necessary to use a form library, however, regardless of your opinion, I hope that you learn something in this post.

Let's start with the first example of how to implement a form without a form library. In this example, I will explore an effective way to create an advanced components form.

Basic requirements?

To perform this tutorial you will need to have:

Basic knowledge of Javascript.
Basic knowledge of React.
NodeJS in your environment.

In this post I will use Yarn, feel free to use NPM, I usually use Typescript, but I will write the code with Javascript since Typescript user is familiar with Javascript too.

First steps

To start we need to initiate a React application with the command:

npx create-react-app react-form
cd react-form
yarn
yarn start

We are creating an application, opening the application directory, installing dependencies, and starting the application.

Form libraries can be optional, but if you want good validation in your forms you should use a library form validation. For this tutorial I will use Yup, since that our goal is to learn how to implement good forms, I will use Bootstrap to work more easily.

yarn add bootstrap
yarn add yup

The create-react-app creates some files that we will not use for this tutorial, for this reason, I will remove them, so the files structures are:

index.css

@import url("https://fonts.googleapis.com/css?family=Roboto:300,400,700&display=swap");

@import "./../node_modules/bootstrap/dist/css/bootstrap.css";

App.js

import React from "react";

function App() {
  return <div></div>;
}

export default App;

index.js

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";

ReactDOM.render(<App />, document.getElementById("root"));

Forms with controlled input

Forms with controlled inputs are the most common example included in libraries. In this approach, every time that the input value is changed the component is rendered again, so we save the input value in a specific state:

function Input() {
  const [input, setInput] = useState("");

  return <input name="input" onChange={(e) => setInput(e.target.value)} />;
}

I will create a folder for every component, this way the files should have the name index.jsx.

For this form I will create a component in Components/FormControlled/Input, this component will be responsible to show a label, an input, and in case of error, a span with an error message. In this component we should validate whether the input was touched or not, it's helpful to show error messages.

import React, { useRef, useEffect, ChangeEvent, useState } from "react";

function Input({ error, label, ...rest }) {
  const [touched, setTouched] = useState(false);

  return (
    <>
      <label htmlFor={rest.name}>{label}</label>
      <input
        className="form-control"
        {...rest}
        onBlur={() => setTouched(true)}
      />
      <span className="text-danger">{touched && error}</span>
    </>
  );
}

export default Input;

The principal component will be Components/FormControlled, this is the component where we will build our form, so let's implement it:

import React, { useState, useEffect } from "react";
import Input from "./Input";

const initialFormState = {
   name:'',
   email:'',
   password:''
}

const function(){

   const [form, setForm] = useState(initialFormState)

   function setInput(inputName){
      return (e)=>{
         const newValue = {[inputName]:e.target.value}
              return setForm(form => ({...form, ...newValue}))
      }
   }

   return (
      <>
         <h3>Form Controlled</h3>
         <form>
               <div className="form-group">
                  <Input
                     name="name"
                     onChange={setInput('name')}
                     label="Name"
                     value={form.name}
                  />
               </div>
               <div className="form-group">
                  <Input
                     name="email"
                     onChange={setInput('email')}
                     label="E-mail"
                     value={form.email}
                  />
               </div>
               <div className="form-group">
                  <Input
                     name="password"
                     onChange={setInput('password')}
                     label="Password"
                     value={form.password}
                  />
               </div>

               <div className="form-group">
                  <button type="button" className="btn btn-primary">Submit</button>
               </div>
         </form>
      </>
   );
}

export default UserForm;

What is happening here?

I'm creating a state for our form.
I have a function called setInput that receives the input name and return another function that receives the input change event, you can find more information about that Closures.
After that, I just return the template of component with the Input component. I just need to pass the field name in setInput because this function will return a function that receives input change event as argument, and the second function know the context of the first function.

In order to have the application working, we need to make some changes in App.js.

import React from "react";
import FormControlled from "./Components/FormControlled";

function App() {
  return (
    <div className="container-fluid">
      <div className="row">
        <div className="col-lg-6 col-md-6">
          <FormControlled />
        </div>
      </div>
    </div>
  );
}

export default App;

yarn start

Adding field validations

As mentioned before, we will use Yup to create input validations, I believe that this is the best option to create validations because this package gives us a great number of resources which saves us time in having to write them.

In this case, I'm creating an object with the same structure as our form state, and adding some roles that should be applied, after that I add the message errors.

import * as yup from "yup";

export const FormValidations = yup.object().shape({
  name: yup.string().required("Name is required"),
  email: yup.string().email("E-mail is invalid").required("E-mail is required"),
  password: yup.string().min(8, "Minimum 8 chars").max(20, "Max 20 chars"),
});

Let's back to the Components/FormControlled and add this validation in our form.

 /*...................*/
import {FormValidations} from './index.validations'
import useValidation from './../../hooks/useValidation'

 /*...................*/

const function(){
 /*...................*/
   const [error, setErrors] = useState({})

   async function validate(){
      try{
         await formValidations.validate(form, {abortEarly:true})
         setErrors({})
      }catch(e){
         if(e instanceof ValidationError){
            const errors = {}
            e.inner.forEach(key=>{
               errors[key.path] = key.message
            })
            setErrors(errors)
         }
      }
   }

   useEffect(()=>{validate()},[form])

   return (
      <>
         <h3>Form Controlled</h3>
         <form>
               <div className="form-group">
                  <Input
                     /*...................*/
                     error={error.name}
                  />
               </div>
               <div className="form-group">
                  <Input
                     /*...................*/
                     error={error.email}
                  />
               </div>
               <div className="form-group">
                  <Input
                     /*...................*/
                     error={error.password}
                  />
               </div>

               <div className="form-group">
                  <button type="button" className="btn btn-primary">Submit</button>
               </div>
         </form>
      </>
   );
}

export default UserForm;

Let's look at some changes

Added news state to save errors.
Added a function named validate, this function should receive the form values and pass this value to object validation written in the last step. If the form state has a valid value, we set an empty object in the errors state, but if it has any error, we need to know if is an error of validation (ValidationError instance), before setting them in the errors state.
To update the errors every time that form is changed, we pass form state as a dependency in the useEffect hook.
Added object error with the specific property in every field. If you run the application again you will see the form working well with validation.

Improving our solution.

I think that we can improve our code, we can split some parts of our code and create a new hook to make the code more understandable and cleaner.

Creating a hook useValidation

First of all, I will create a folder called Hooks in the root of application Hooks/useValidation, inside the folder I will create a file called index.js. Inside this file, we just need to put part of our code, validate function, useEffect hook, and the error state. Finally, we return an object with the error state.

import React, { useState, useEffect } from "react";
import { ValidationError } from "yup";

const useValidation = (values, schema) => {
  const [errors, setErrors] = useState({});

  const validate = async () => {
    try {
      await schema.validate(values, { abortEarly: false });
      setErrors({});
    } catch (e) {
      if (e instanceof ValidationError) {
        const errors = {};
        e.inner.forEach((key) => {
          errors[key.path] = key.message;
        });
        setErrors(errors);
      }
    }
  };

  useEffect(() => {
    validate();
  }, [values]);

  return { errors };
};

export default useValidation;

Improving form component

I just need to remove the code that was added in useValidation hook, and import the new hook.

import React, { useState, useEffect } from "react";
import Input from "./Input";
import { FormValidations } from "./index.validations";
import useValidation from "./../../hooks/useValidation";

const initialFormState = {
  name: "",
  email: "",
  password: "",
};

const UserForm = () => {
  const [form, setForm] = useState(initialFormState);
  const { errors } = useValidation(form, FormValidations);

  function setInput(inputName) {
    return (e) => {
      const newValue = { [inputName]: e.target.value };
      return setForm((form) => ({ ...form, ...newValue }));
    };
  }

  return (
    <>
      <h3>Form Controlled</h3>
      <form>
        <div className="form-group">
          <Input
            name="name"
            onChange={setInput("name")}
            label="Name"
            value={form.name}
            error={errors.name}
          />
        </div>
        <div className="form-group">
          <Input
            name="email"
            onChange={setInput("email")}
            label="E-mail"
            value={form.email}
            error={errors.email}
          />
        </div>
        <div className="form-group">
          <Input
            name="password"
            onChange={setInput("password")}
            label="Password"
            value={form.password}
            error={errors.password}
          />
        </div>

        <div className="form-group">
          <button type="button" className="btn btn-primary">
            Submit
          </button>
        </div>
      </form>
    </>
  );
};

export default UserForm;

Advantages

It's is simple code.
Validation with every change give us a better experience.

Disadvantages

This isn't the better approach if you want better performance.
The component is rendered again every time that the state is changed.

Look at the complete code in github: https://github.com/Jucian0/react-form-controlled
Codesandbox: https://codesandbox.io/s/controled-form-tutorial-yt4oj

In the next post I will show you how to improve this code to make it perform better.

Implementing Redux pattern

Jucian0 — Thu, 20 May 2021 02:03:36 +0000

If you are a software developer and aren't in another world, you have probably read or heard something about Redux. Today Redux is very popular, but not as much as some years ago. The first time that I heard about React, the second word was always Redux, "How to init with react and redux", "Todo app with react redux", and another hundred names. Even though Redux is not as popular today as in the past, I think it's very helpful that you know how Redux works and how you can create a simple version of this famous pattern.

Get in touch with me on Twitter

Redux is a pattern that provides a way to manage your application state. Redux pattern increased in popularity when front-end applications became more complex, and when we started to develop applications with many components, sharing the same state. You can find a lot of libraries that implement this, we have Redux for React and NGXS and NgRx for Angular.

Since Redux is very popular I assume that you know how it works and how to use it, but I will provide some basic information about it. If you want to know more, however, I recommend that you read the documentation about the patterns and how some libraries do this.

Redux explanations

Actions - basically actions are like instructions that drive your intentions, you need a type that describes what you want to do, and if you need some data to perform your intentions, it's necessary to provide a payload.
```
const action = {
    type:'ADD_TODO',
    payload: {label:'Push up', complete:false}
} 
```
Reducers - reducers are pure functions that perform your intentions in the application state, that function receives the current state and the action, that is running. For every action, you should provide a reaction in your reducer.
```
function reducer(state, action){
    switch(action.type){
        case  'ADD_TODO': // do something
        case  'DELETE_TODO': // do another thing
    }
}
```
Store - I like to think about Store as a place where you have the real state, and it provides the resources to get the state store.getState(), and register listeners.

Our Redux API

This is how we will initiate our Store.

const store = new Store(reducers, initialState)

Our redux implementation has some public methods and private method:

dispatch() - This method will receive the instruction that will drive how the state will be changed.
subscriber() - With this method, we can subscribe listeners to know when the application state is changed. These listeners will be simple functions that can receive the new state changed as argument.
value() - These methods will return the current state of the application.

class Store{
    constructor(){}

    dispatch()

    subscriber()
}

We need another method to perform the state changes, reducer is the last method that we need in our implementation.

class Store{
    //...
    private reduce()
}

Okay, we need more than methods in our redux implementation, we need a property to hold the state application, state and another to hold the reducers application and one more to hold the subscribers.

class Store{
    private state:{[key:string]:any}
    private reducers:{[key:string]:Function}
    private subscribers: Array<Function>;

    //...
}

Implementation

Constructor

Let's go ahead. You may notice that I'm using typescript, but feel free to use javascript. Our first step is to write the constructor method, constructor needs to receive the reducers and the initialState, so let's do that:

class Store{
    //...
    constructor(reducers={}, initialState={}){
        this.reducers = reducers
        this.state = initialState
    }
    //...
}

Here we assign reducers and initialState to state and reducers properties.

Using it:

    const reducers = {
        todoReducer:(state, action) => ({...})
    }

    const initialState = {
        todoReducer:{todos:[]}
    }

    const store = new Store(reducers, initialState)

Reduce

As I mentioned earlier, reduce will perform and return the state changed.

class Store{
    //...
    private reduce(state, action) {
        const newState = {}
        for (const prop in this.reducers) {
        newState[prop] = this.reducers[prop](state[prop], action)
        }
        return newState
    }
}

Here we iterate reducers registered in Store and invoke every reducer passing as argument the current state and the current action. After that, we save the result returned by every reducer in the correct state property. Finally, we return to the new state. Since the reduce method is a private method it will not be available to use out of class.

Subscribe will allow us to have many state change listeners, so let's implement it.

class Store{
    //...
    subscribe(fn:Function){
        this.subscribers = [...this.subscribers, fn];

        return () => {
            thi.subscribers = this.subscribers.filter(subscriber => subscriber !== fn)
        }
    }
}

Here we received a function that will be invoked when some changes happen in the state, subscriber will add the fn argument into subscribers property. The last part of this method will return another function that when invoked will remove the fn function passed as argument. The function that will be returned knows the subscriber method context, for this reason, we can compare fn argument with every subscriber registered in our Store and decide who needs to be removed.

Using it:

    //...
    const store = new Store(reducers, initialState)

    function callback(state){
        // do something
    }

    const unsubscribe = store.subscribe(callback)

    unsubscribe()// wii remove callback function

Dispatch

Let's implement this method and learn how it works.

class Store{
    //...
    dispatch(action) {
        this.state = this.reduce(this.state, action)
        this.subscribers.forEach(fn => fn(this.state))
    }
}

When reduce method is invoked it returns a new state and assigns it to state property of the store. After that, we iterate subscribers property and invoke every subscribed function passing the new state as argument, this way every listener will be notified with the new application state.

Using it:

//...
const store = new Store(reducers, initialState)

const action = {
    type:'ADD_TODO',
    payload: {label:'Push up', complete:false}
} 

store.dispatch(action)

Value

Our last method implementation will be a get method that will return us the current state, let's implement it:

class Store{
    //...
  get value() {
    return this.state;
  }
}

Final code

class Store {
  private subscribers: Function[]
  private reducers: { [key: string]: Function }
  private state: { [key: string]: any }

  constructor(reducers = {}, initialState = {}) {
    this.subscribers = []
    this.reducers = reducers
    this.state = this.reduce(initialState, {})
  }

  get value() {
    return this.state;
  }

  subscribe(fn) {
    this.subscribers = [...this.subscribers, fn]
    return () => {
      this.subscribers = this.subscribers.filter(subscriber => subscriber !== fn)
    }
  }

  dispatch(action) {
    this.state = this.reduce(this.state, action)
    this.subscribers.forEach(fn => fn(this.value))
  }

  private reduce(state, action) {
    const newState = {}
    for (const prop in this.reducers) {
      newState[prop] = this.reducers[prop](state[prop], action)
    }
    return newState
  }
}

Finally, we have a simple implementation of redux, this implementation does not reflect any redux library implementation, it's just a possible implementation of redux. The principal goal of this post is to show you a simple way of how redux works. If you are more interested in a functional approach, let me know and we can address it in the next post.

I hope that you enjoyed this post. Stay Safe!!!

Reactjs: Managing filter

Jucian0 — Thu, 11 Feb 2021 22:01:59 +0000

State management is too important when you work with front end development, and with react, this would be no different. And when you are working in a filter for many reasons you should maintain the filter state in the URL, when you look at a specific page in one application, and you press F5 that application should be able to display the same page with the same results and filter state or tabs opened. And the better way to make this is to persist this information in URL.

Get in touch with me on Twitter

When you figure out this is normal you search for an easy way to implement this, but not always it's easy. I want to show you a way to implement that.

Let see an example of an implementation that shows you how to do this.

For this example, I will use this repo https://github.com/use-form/use-query-filter, let start installing a package to deal with this.

yarn add @use-form/use-query-filter

use-query-filter - This package provides a way to managing filter state without effort. use-query-form provides a hook called useQueryFilter that provide a similar experience that a hook form provides, with it, you can pass an initial state object and receives two functions that change filter state set, reset.

set: This function can receive a new state or can receive a function that receives the current filter state, then you can update the state by changing just the property you want to change; set({ property: newValue }) or set(state=>({...state, property: value })).

reset: This function will reset the filter state, also it receives a function that receives the current state by parameter, and it will be run when the filter state is reset.

Show me the code.

In this example, you will build a simple filter with some generics fields.

function Filter() {
  const [filter, { set, reset }] = useQueryFilter({
    keywords: '',
    type: 'JSX',
  }); 

  function handleSubmit(e) {
    e.preventDefault()
    console.log('submit', filter);
  }

  function handleReset(e) {
    e.preventDefault()
    reset((e) => console.log('reset', e));
  }

  return (
    <FilterProvider value={[filter, { set, reset }]}>
      <section>
        <form onSubmit={handleSubmit} onReset={handleReset}>
          <div>
            <input
              placeholder="Keywords"
              onChange={(e) => set({ keywords: e.target.value })}
              value={filter.keywords}
            />
          </div>
          <div>
            <select
              placeholder="Type"
              onChange={(e) => set({ type: e.target.value })}
              value={filter.type}
            >
              <option value="JSX">JSX</option>
              <option value="TSX">TSX</option>
              <option value="JS">JS</option>
            </select>
          </div>
          <div>
            <button type="reset">Reset</button>
            <button type="submit">Submit</button>
          </div>
        </form>
      </section>
      <Content />
    </FilterProvider>
  );
}

At the beginning of the code is set the initial values, nothing complicated here, after having the functions that handle the form submit and reset events handleSubmit and handleReset.

After you can see the return of the function component, and it used a FilterProvider that receives the useQueryFilter hook return. FilterProvider is very helpful when you want to build a full page with filter, list, and pagination because the pagination should know and should change the filter state since the _offset and _limit are pagination properties and these properties should belong the object filter.

Let me show you an example:

function AnotherPart() {
  const [filter, { set }] = useFilterContext();

  return (
    <>
      <input
        name="keywords"
        onChange={(e) => set({ keywords: e.target.value })}
      />

      <select onChange={(e) => set({ sort: e.target.value })}>
        <option value="az">A - Z</option>
        <option value="za">Z - A</option>
      </select>
    </>
  );
}

If you are interested in what happing with the filter state you can use useFilterContext and with this hook is possible to change and receives the current state of the filter.

In a real situation is possible that you use something like that:

const initialValues = {
  keywords: '',
  sort: 'az',
};

function Container() {
  const filter = useQueryFilter(initialValues);

  return (
    <FilterContext.Provider value={filter}>
      <Filter />
      <List />
      <Pagination />
    </FilterContext.Provider>
  );
}

function Filter() {
  const [filter, { set }] = useFilterContext();

  return (
    <>
      <input
        name="keywords"
        onChange={(e) => set({ keywords: e.target.value })}
      />

      <select onChange={(e) => set({ sort: e.target.value })}>
        <option value="az">A - Z</option>
        <option value="za">Z - A</option>
      </select>
    </>
  );
}

function List() {
  const [filter, { set }] = useFilterContext();

  return <>...</>;
}

function Pagination() {
  const [filter, { set }] = useFilterContext();

  return <>...</>;
}

The last example is just a small view of what happening and how you can organize your code when writing a page with filter and pagination, and one list, feel free to make points about this.

You can see this example running here https://codesandbox.io/s/use-query-filter-iiend

Building Forms with useForm

Jucian0 — Thu, 14 Jan 2021 02:45:09 +0000

One of the most important steps when you are developing web applications is how to write and maintain smart forms with little effort.
When you think about reactjs you can find many form library options and I must admit that there are a lot of good form libraries, so you may think why one more?

Get in touch with me on Twitter

UseForm was born because I found great difficulty when I wanted to build complex forms with different steps or levels and with many fields.

When we need to build complex forms we can encounter issues like:

A lot of rendering - Every change is made in the form state is reflected and the form component tree is rendered again and again.
A lot of properties - When you use some libraries it is necessary to put many properties in one input, creating a lot of unnecessary code.
Just one approach - You can use controlled forms or uncontrolled forms never both together.
Share state - You should share the form state with many other components like a step form and a form library should provide it.

How useForm works

The most important thing is that there are three ways to use it:

You can build an uncontrolled form, this is the most performative form because the input value is not saved in the component state and all changes are integrated with a component reference and native events. It means you can fill out a form and submit it with just one render.
You can build a controlled form, this is not the most performative way to build a form, but in this way the user can have a better experience.It can be so frustrating when you fill in a form and just after you submit it, you realize that some field values are wrong. When you use a controlled form, shows the user if some values are wrong which the user can fix before submitting.
You can use the debounce approach which, in my opinion, is the better option because you can have the best of both worlds(Jean-Luc Picard). This is whay it is the better option:

"The debounce() function forces a function to wait a certain amount of time before running again. The function is built to limit the number of times a function is called."

If you are interested in this library,please leave a star: https://github.com/use-form/use-form

Show me the code

To build a simple form.

In this first example I will show you how you can build a simple form and how you can define a controlled, uncontrolled or debounce form.

import { useForm } from "@use-form/use-form";

const initialValues = {
  name: 'Jesse',
  email: 'jesse@jesse.com',
  score: 25,
}

const { register, state: { values }} = useForm({initialValues})


<Input placeholder="Name" {...register("name")}/>
<Input placeholder="E-mail" type="email"{...register("email")}/>
<Range {...register("score")}/>

useForm can have many properties and some of these properties are: isDebounced and isControlled.

By default, useForm uses the uncontrolled approach.

Adding validation with yup

When working with real application validations forms are very common because this is the way you can verify if the input's value is correct or not. There are several validations solutions available, but when using useForm the default solution is Yup. With yup the process of validation is simple and powerful.

import { useForm } from "@use-form/use-form";
import * as yup from "yup";

const initialValues = {
  name: "Jesse",
  email: "jesse@jesse.com",
  pets: ["felix"],
  accept: false,
};

const validation = yup.object().shape({
  name: yup.string().required("This field is required"),
  email: yup
    .string()
    .email("This field must be a valid e-mail")
    .required("This field is required"),
  pets: yup.array(yup.string().required("This field is required")),
  accept: yup.bool().oneOf([true], "Field must be checked"),
});

function ControlledForm() {
  const { register, state } = useForm({
    isControlled: true,
    initialValues,
    validationSchema,
  });
  return (
    <>
      <input {...register("name")} />
      <span>{touched.name && errors.name}</span>
      <input type="email" {...register("email")} />
      <span>{touched.email && errors.email}</span>
      <input {...register("pets.0")} />
      <span>{touched.pets?.[0] && errors.pets?.[0]}</span>
      <input type="checkbox" {...register("accept")} />
      <span>{touched.accept && errors.accept}</span>
    </>
  );
}

FormContext

FormContext provides a way to share a form state with another component in the tree.

const form = useForm(...)

<ContextForm.Provider value={form}>

 {/* ....another components */}

</ContextForm.Provider>

and

const {register, ...form} = useFormContext()

<Input placeholder="Name" {register('otherPerson.name')}/>

UseForm has a lot of resources, and you can find them at on this link. https://useform.org

Conclusion

I hope you have enjoyed this post and have found it helpful, useForm is a new library to build forms and has some documentation in English. If you want to start with open source, this repository can be your first step.

https://github.com/use-form/use-form

React: Formulários parte 2

Jucian0 — Thu, 13 Aug 2020 01:11:44 +0000

Esta é a segunda parte do assunto de formulário sem bibliotecas no react, na primeira escrevi um exemplo de formulário sem biblioteca que funciona muito bem com validação onChange e hook de validação, mas se você leu a postagem anterior até o final deve ter percebido que o exemplo apesar de ser bom, não era tão performático por ter varias renderizações ao digitar algo nos campos.

Get in touch with me on Twitter

Primeira parte do assunto: https://dev.to/jucian0/reactjs-formularios-55mo

E nesta postagem irei abordar mais o tema de desempenho, tentarei responder como criar um componente de formulário mais performático, isto é reduzir ao máximo o número de renderizações da tela, mas sem perder a comodidade de validação onChange.

Link do repositório: https://github.com/Jucian0/react-form-controlled

Se você não leu a postagem anterior sugiro uma leitura rápida para entender como a aplicação funciona.

Novo componente FormDebounce

No arquivo, App.jsx tem um comentário:


import React from 'react';
import FormControlled from './Components/FormControlled'

function App() {
  return (
    <div className="container-fluid">
      <div className="row">
        <div className="col-lg-6 col-md-6">
          {/* vai receber segundo abordagem */}
        </div>
        <div className="col-lg-6 col-md-6">
          <FormControlled />
        </div>
      </div>
    </div>
  );
}

export default App;

Esse comentário vai dar lugar ao novo componente de formulário otimizado. Como os componentes são muito parecidos vou fazer uma cópia do componente FormControlled com o nome FormDebounce, e se você já tem uma certa experiência já deve ter matado a charada ao ler o nome do componente, mas tudo bem continue comigo até o final.

Um detalhe importante é alterar a propriedade de value para defaultValue nos Inputs do formulário, como não estou mais usando um formulário controllado é necessário adicionar uma propriedade que da valor inicial para o componente.

 <Input
    name="name"
    onChange={e => setInput({ name: e.target.value })}
    label="Name"
    error={errors.name}
    defaultValue={form.name}
 />

Você pode ler mais em: https://reactjs.org/docs/uncontrolled-components.html#default-values

Agora vou mudar o componente App.jsx para receber o novo componente de formulário:

function App() {
  return (
    <div className="container-fluid">
      <div className="row">
        <div className="col-lg-6 col-md-6">
          <FormDebounce />
        </div>
        <div className="col-lg-6 col-md-6">
          <FormControlled />
        </div>
      </div>
    </div>
  );
}

Criando a função debounce

Debounce é o nome dado a uma função de ordem superior

Mas o que é uma função de ordem superior?

Função de ordem superior é uma função que retorna outra função

Então debounce é uma função que retorna outra função, e essa função retornada executa outra função que é passada por parâmetro para a função debounce com uma espera de tempo que é passado por parâmetro para a função debounce também.

    const funcCallBack = ()=>{}//sou executada dentro de "funcA"'
    const time = 3000//determino o tempo de espera que a "funcCallBack" é executada

    const funcA = debounce(
       funcCallBack,
       time 
    )

    funcA()//passo meus parâmetros para "funcCallBack"

De forma simples esse é o funcionamento de uma função debounce, agora abaixo veja como fica o código dela:

export const debounce = (fn, wait, immediate) => {
    let timeout

    return (...args) => {
        const context = this

        const later = () => {
            timeout = null
            if (!immediate) fn.apply(context, args)
        }

        const callNow = immediate && !timeout
        clearTimeout(timeout)
        timeout = setTimeout(later, wait)

        if (callNow) {
            fn.apply(context, args)
        }
    }
}

O motivo de criar essa função é que quero reduzir o número de vezes que o estado do componente é atualizado e dessa forma diminuir as renderizações desnecessárias.

Adicionando debounce ao componente de Input

Vou usar a função debounce atrelada ao evento onChange do input e adicionar um tempo de espera de 500 milissegundos. Assim garanto que o estado do componente FormDebounce só muda depois de 500 milissegundos que paro de digitar, em uma situação normal o componente seria renderizado a cada caractere que eu digitasse no input, veja como fica o código:

import React, { useState, useRef, useEffect, useCallback } from 'react';
import { debounce } from '../Debounce';

const Input = ({ error, label, onChange, ...rest }) => {
   const [touched, setTouched] = useState(false)
   const inputRef = useRef(null)
   const debounceInput = useCallback(debounce(onChange, 500), [debounce])
   const blurInput = useCallback(() => setTouched(true), [setTouched])

   useEffect(() => {
      inputRef.current.addEventListener('input', debounceInput)
      inputRef.current.addEventListener('blur', blurInput)
   }, [blurInput, debounceInput, inputRef])

   return (
      <>
         <label htmlFor={rest.name}>{label}</label>
         <input className="form-control" {...rest} ref={inputRef} />
         <span className="text-danger">{touched && error}</span>
      </>
   );
}
export default Input

Abaixo explico cada pare do código.

Linha 5 — Continuo usando a bordagem de useState para salvar o estado de touched do input.
Linha 6 — Usando o hook useRef crio uma referência para o input, com ela pego os eventos input e blur e passo as devidas funções de callback*.*
Linha 7 — Faço uso da função debounce e passo para ela a função onChange recebida das propriedades do componente Input, e também adiciono o valor de 500 milissegundos.
Linha 8 — Nesta parte crio uma função que executa o setTouched que no que lhe concerne é responsável por atualizar o estado de touched.
Linhas 10 a 13 — Usando o useEffect e a referência inputRef adiciono as funções responsáveis por cada evento no seu devido lugar. Em dependências adiciono debounceInput, blurInput e inputRef como dependências, como descrito em uma postagem de Dan Abramov sobre useEffect. https://overreacted.io/a-complete-guide-to-useeffect/

A common mistake is to think functions shouldn’t be dependencies.
Linhas 15 a 22 — Retorno o template do componente, não houve muitas mudanças nessa parte do código.

Um detalhe importante para ser explicado é o uso do hook useCallback envolvendo às duas funções que estão sendo usadas dentro do useEffect. Bem useCallback memoriza a função que recebe como argumento e devolve sempre a mesma função a menos que uma de suas dependências mude, e como descrito acima na citação de Dan Abramov as funções dentro de um componente mudam sempre que um componente é renderizado, então quando uso o useCallback garanto que a função não seja recriada desde que as dependências de useCallback não mudem.

Melhorando o hook useValidation

Na versão da etapa anterior o hook useValidation retornava apenas um objeto de erros, vou adicionar uma nova propriedade ao objeto de retorno o isValid, uma propriedade booliana. Além disso, algumas melhorias no uso de useEffect dentro do hook, veja como fica o código com as mudanças:

import { useState, useEffect, useCallback } from 'react'
import { ValidationError } from "yup"

const useValidation = (values, schema) => {
   const [errors, setErrors] = useState({})
   const [isValid, setIsValid] = useState(false)

   const validate = useCallback(async () => {
      try {
         await schema.validate(values, { abortEarly: false })
         setErrors({})
         setIsValid(true)
      } catch (e) {
         if (e instanceof ValidationError) {
            const errors = {}
            e.inner.forEach((key) => {
               errors[key.path] = key.message
            })
            setErrors(errors)
            setIsValid(false)
         }
      }
   }, [schema, values])

   useEffect(() => {
      validate()
   }, [validate])

   return { errors, isValid }
}

export default useValidation

Algumas explicações das mudanças que fiz no código:

Linhas 5 e 6 — useState esta criando estados para as propriedades que o hook devolve, isValid e errors.
Linhas 8 a 24 — Adicionada função validate, esta função deve tentar passar os valores do form pelo crivo das validações que foram escritas na etapa anterior, se ela obtiver sucesso eu altero o estado de erros com um objeto vazio, mas se houver um erro de validação o fluxo entra no bloco catch esse bloco não pega apenas erros oriundos da promise de validação por isso faço uma validação se o erro é uma instância de ValidationError caso a validação seja afirmativo o atualizo o estado de errors. É importante notar que o processo de validação é assíncrono por isso uso um async await** **nessa função. Esta função esta envolta de useCallback isso vai evitar que a mesma seja recriada sem necessidade, somente quando as dependências mudarem a ela é recriada.
Linhas 25 a 27 — passo a função validate com dependência, como ela muda quando schema ou values mudam a mesma vai continuar sendo executada quando necessário.

As outras partes

O schema de validação continua inalterado, e componente form apenas pego a nova propriedade isValid do useValidate e adiciono no botão de submit.


  <div className="form-group">
     <button 
        type="button" className="btn btn- 
        primary" disabled={!isValid}>
        Submit
     </button>
 </div>

Comparando os formulários

Vou comparar a quantidade de renderizações usando a extensão do react para desenvolvimento que pode ser encontrado para Chrome e Firefox. No navegador vou clicar f12 e selecionar profiler e Start Profiling.

Resultados para FormDebounce:

Resultados para FormControlled:

No primeiro exemplo temos três renderizações de componente, no segundo temos 13 renderizações, é uma diferença bem grande.

Com este exemplo não estou dizendo que essa deve ser a abordagem ideal, pode ser que em diversos casos isso não faça sentido, mas em outros, deve melhorar muito o desempenho da aplicação.

Link do repositório github: https://github.com/Jucian0/react-form-debounce

Funcionando no codesandbox

https://codesandbox.io/s/github/Jucian0/react-form-debounce/tree/master/?from-embed

Se você chegou até aqui espero que a postagem tenha servido para alguma coisa.

Uma Alternativa

Se você acredita que ainda precisa de uma biblioteca de formulários não deixem de conferir um projeto que estou desenvolvendo:

Github do projeto https://github.com/Jucian0/react-data-forms

Docs: https://www.react-data-forms.org/

DEV Community: Jucian0

Creating multi-step forms in ReactJS

Introduction

Setting up the Application

Organizing the App Component

Creating the form

Codding the usePersonForm Hook

Codding the Form component

Codding steps

Codding BasicInfoStep

Codding AddressStep

Conclusion

The ultimate form library for react you'll ever need

Installation

1. Creating the Form Hook

2. Using the Form Hook in a Form Component

3. Validating Form Fields

Conclusion

Builder pattern: validation class

How Builder pattern works?

Builder Implementation

Use Case

Links

Conclusion

How I became a software developer

How one question changed my life.

How a blog changed my life

How my wife changed my life.

How college changed my life

How starting to work as a software developer changed my life

Conclusion

Pub-Sub pattern: a brief explanation

How Pub-Sub works?

An Analogy

Applying the analogy

Implementing Pub-Sub with javascript

Implementing a use case

Conclusion

Patterns: Observable pattern

Observable pattern

An analogy

Applying the analogy

Basic requirements?

Let's start

Using it

Conclusion

Reactjs: Debounce forms

Let's start

Creating the form component

Debounce function

But, what does that means?

Using debounce function into Input component

Code explanation

Improving useValidation hook

Code explanation

Last change

Comparing the forms

Reactjs: Building forms

Basic requirements?

First steps

index.css

App.js

index.js

Forms with controlled input

What is happening here?

Adding field validations

Let's look at some changes

Improving our solution.

Creating a hook useValidation

Improving form component

Advantages

Disadvantages

Implementing Redux pattern

Redux explanations

Our Redux API

Implementation

Constructor

Reduce

Subscribe

Dispatch

How `Pub-Sub` works?

Implementing `Pub-Sub` with javascript