Forem: Sabin Pandelovitch

[Material-UI] Migrating from react-autosuggest

Sabin Pandelovitch — Thu, 05 Mar 2020 16:02:16 +0000

In the past days I went back to an older React app to add some new features. Written in 2018-2019 using React 16.3, with Material-UI at version 3.* something at the time.

One solution for autosuggest input from them back in the day from Material-UI, they recommended using some libraries one of which was react-autosuggest

The problem

Meanwhile my app was refactored, moved to React 16.9, Material-UI 4, hooks and what not. Everything was ok, or so I thought, util I saw some warning messages in the console

Warning: Using UNSAFE_componentWillReceiveProps in strict mode is not recommended and may indicate bugs in your code. See https://fb.me/react-unsafe-component-lifecycles for details.

* Move data fetching code or side effects to componentDidUpdate.
* If you're updating state whenever props change, refactor your code to use memoization techniques or move it to static getDerivedStateFromProps. Learn more at: https://fb.me/react-derived-state

Please update the following components: Autowhatever

Searched for a solution, found a full discussion on the matter here, also there is an issue opened here, but as the guys talk on GitHub, the project seems kind of abandoned.

The use case

I'll take you through the implementation from my project for a single case, that of the country autocomplete.

The country list is an array of objects as follows

[
    { _id: "5c1b6690468fa31f86286825", name: "Afghanistan", __v: 0, eu: false },
    ...
    { _id: "5c1b6690468fa31f86286918", name: "Zimbabwe", __v: 0, eu: false }
]

Here there are 2 cases to cover:

Display the name, store the _id
Display the name, store the whole object

Ok so let's dive into the code a bit and see how it looked with React-Autosuggest library.

This is a simplified version of the code that I use, made to resemble the most with the one from Material-UI tutorial

import React, { useState } from 'react';
import * as PropTypes from 'prop-types';
import deburr from 'lodash/deburr';
import Autosuggest from 'react-autosuggest';
import match from 'autosuggest-highlight/match';
import parse from 'autosuggest-highlight/parse';
import TextField from '@material-ui/core/TextField';
import Paper from '@material-ui/core/Paper';
import MenuItem from '@material-ui/core/MenuItem';
import styles from './styles';

const renderSuggestion = (suggestion, { query, isHighlighted }) => {
  const matches = match(suggestion.name, query);
  const parts = parse(suggestion.name, matches);

  return (
    <MenuItem selected={isHighlighted} component="div">
      <div>
        {parts.map((part, index) => (part.highlight ? (
          <span key={String(index)} style={{ fontWeight: 500 }}>
              {part.text}
            </span>
        ) : (
          <strong key={String(index)} style={{ fontWeight: 300 }}>
            {part.text}
          </strong>
        )))}
      </div>
    </MenuItem>
  );
};

const getSuggestions = (suggestions, value) => {
  const inputValue = deburr(value.trim()).toLowerCase();
  const inputLength = inputValue.length;
  let count = 0;

  return inputLength === 0
    ? []
    : suggestions.filter((suggestion) => {
      const keep = count < 5 && suggestion.name.slice(0, inputLength).toLowerCase() === inputValue;

      if (keep) {
        count += 1;
      }

      return keep;
    });
};

const renderInputComponent = (inputProps) => {
  const {
    classes, inputRef = () => {
    }, ref, ...other
  } = inputProps;

  return (
    <TextField
      fullWidth
      InputProps={{
        inputRef: (node) => {
          ref(node);
          inputRef(node);
        },
        classes: {
          input: classes.input,
        },
      }}
      {...other}
    />
  );
};

const getSuggestionValue = suggestion => suggestion.name;

const AutosuggestInput = ({ inputValue, label, margin, formInput, handler, inputSuggestions, returnId }) => {
  const classes = styles();

  const [suggestions, setSuggestions] = useState([]);
  const [value, setValue] = useState(inputValue);

  const handleSuggestionsFetchRequested = ({ value }) => {
    setSuggestions(getSuggestions(inputSuggestions, value))
  };

  const handleSuggestionsClearRequested = () => {
    setSuggestions([])
  };

  const handleChange = () => (event, { newValue }) => {
    const suggestion = suggestions.filter(sug => sug.name === newValue);

    !suggestion.length && handler(formInput, '');

    setValue(newValue);
  };

  const onSuggestionSelected = (event, { suggestion }) => {
    handler(formInput, suggestion._id);
  };

  const autosuggestProps = {
    suggestions,
    renderInputComponent: renderInputComponent,
    onSuggestionsFetchRequested: handleSuggestionsFetchRequested,
    onSuggestionsClearRequested: handleSuggestionsClearRequested,
    getSuggestionValue: getSuggestionValue,
    renderSuggestion: renderSuggestion,
    onSuggestionSelected: onSuggestionSelected,
  };

  return (
    <div className={classes.root}>
      <Autosuggest
        {...autosuggestProps}
        inputProps={{
          classes,
          placeholder: label,
          value,
          onChange: handleChange(),
          autoComplete: 'no',
          margin,
        }}
        theme={{
          container: classes.container,
          suggestionsContainerOpen: classes.suggestionsContainerOpen,
          suggestionsList: classes.suggestionsList,
          suggestion: classes.suggestion,
        }}
        renderSuggestionsContainer={options => (
          <Paper {...options.containerProps} square>
            {options.children}
          </Paper>
        )}
      />
    </div>
  )
};

AutosuggestInput.propsTypes = {
  inputValue: PropTypes.string,
  label: PropTypes.string,
  margin: PropTypes.string,
  formInput: PropTypes.string.isRequired,
  handler: PropTypes.func.isRequired,
  inputSuggestions: PropTypes.array.isRequired,
  returnId: PropTypes.bool,
};

AutosuggestInput.defaultProps = {
  inputValue: '',
  label: '',
  margin: 'normal',
  returnId: false,
};

export default AutosuggestInput;

The solution*

*Solution that worked best for me, there are far more than one way of solving this

It actually came from the same guys that recommended using this library in the first place.

Time has past and the people from Material-UI developed their own solution for the Autocomplete component

Much more simplified, much more elegant, much more powerfully.

The component is still in the Lab phase but it can be integrated and used as ease.

Below is the new code written for the same test case

import React from 'react';
import * as PropTypes from 'prop-types';

import { TextField } from '@material-ui/core';
import { Autocomplete } from '@material-ui/lab';

const AutocompleteInput = ({ input, options, value, label, margin, required, returnId, handler }) => (
  <Autocomplete
    options={options}
    getOptionLabel={option => (typeof option === 'string' && returnId ? options.find(c => c._id === option) : option)?.name}
    value={value}
    onChange={(event, newValue) => {
      handler(input, returnId ? newValue?._id : newValue)
    }}
    renderInput={params => <TextField {...params} label={label} margin={margin} required={required} />}
  />
);

AutocompleteInput.propTypes = {
  input: PropTypes.string.isRequired,
  options: PropTypes.array.isRequired,
  value: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
  label: PropTypes.string.isRequired,
  margin: PropTypes.string,
  required: PropTypes.bool,
  returnId: PropTypes.bool,
  handler: PropTypes.func.isRequired,
};

AutocompleteInput.defaultProps = {
  margin: 'normal',
  required: false,
  returnId: false,
  value: null,
};

export default AutocompleteInput;

This is a mere example of what it can do. It has much more potential and options available and I hope to see it in the Material-UI 5 core integrated.

For more information check the following links from Material-UI

Live demo

You can find a working sandbox here

Forms in React, a tale of abstraction and optimisation

Sabin Pandelovitch — Thu, 12 Dec 2019 16:09:00 +0000

The basics
Abstraction
Optimisation

In my example I use the Material-UI library, and mostly the TextField component.

It can be removed and adapted to any library or no library at all.

The basics

Below is an example of a basic form with a few inputs (fullWidth is used just for view purposes only)

const Form = () => {
  return (
    <form>
      <TextField label="Name" name="name" type="text" fullWidth />
      <TextField label="Age" name="age" type="number" fullWidth />
      <TextField label="Email" name="email" type="email" fullWidth />
      <TextField label="Password" name="password" type="password" fullWidth />
      <Button type="submit" fullWidth>
        submit
      </Button>
    </form>
  );
}

CodeSandbox example

In order to use the data and do something with it, we would need the following:

An object to store the data

For this we will use the useState hook from React

const [formData, setFormData] = useState({});

A handler to update the data

We need a function that takes the value and the name as a key from the input event.target object and updates the formData object

const updateValues = ({ target: { name, value } }) => {
    setFormData({ ...formData, [name]: value });
};

Bind the function to the inputs onChange event

<TextField ... onChange={updateValues} />

Extra: Usually in forms there are components have some logic and not update the values via the event object and have their own logic, for example an autocomplete component, image gallery with upload and delete, an editor like CKEditor etc. and for this we use another handler

const updateValuesWithParams = (name, value) => {
    setFormData({ ...formData, [name]: value });
};

A handler to submit the data

The function that does something with the data. In this case it displays it in the console.

const submitHandler = e => {
    e.preventDefault();

    console.log(formData);
};

Bind the function to the form onSubmit event

<form onSubmit={submitHandler}>

Voila, now we have a form that we can use

CodeSandbox example

Abstraction

The main idea with abstraction for me is not to have duplicate code or duplicate logic in my components, after that comes abstraction of data layers and so on...

Starting with the code duplication the first thing is to get the inputs out into objects and iterate them.

We create an array with each field as a separate object

const inputs = [
  {
    label:'Name',
    name:'name',
    type:'text'
  },
  {
    label:'Age',
    name:'age',
    type:'number'
  },
  {
    label:'Email',
    name:'email',
    type:'email'
  },
  {
    label:'Password',
    name:'password',
    type:'password'
  },
]

And just iterate over it in our form render

const Form = () => {
  ...

  return (
    <form onSubmit={submitHandler}>
      {formFields.map(item => (
        <TextField
          key={item.name}
          onChange={updateValues}
          fullWidth
          {...item}
        />
      ))}
      <Button type="submit" fullWidth>
        submit
      </Button>
    </form>
  );
}

CodeSandbox example

So far so good, but what happens if we have more than one form? What happens with the handlers? do we duplicate them also?

My solution was to create a custom hook to handle this. Basically we move the formData object and handlers outside the components.

I ended with a useFormData hook

import { useState } from "react";

const useFormData = (initialValue = {}) => {
  const [formData, setFormData] = useState(initialValue);

  const updateValues = ({ target: { name, value } }) => {
    setFormData({ ...formData, [name]: value });
  };

  const updateValuesParams = ({ target: { name, value } }) => {
    setFormData({ ...formData, [name]: value });
  };

  const api = {
    updateValues,
    updateValuesParams,
    setFormData
  };

  return [formData, api];
};

export default useFormData;

Which can be used in our form components as follows

const [formData, { updateValues, updateValueParams, setFormData }] = useFormData({});

The hook one parameter when called.

initialFormData: An object with initial value for the formData state in the hook

The hook returns an array with two values:

formData: The current formData object
api: An object that exposes the handlers outside the hook

Our component now looks like this

const Form = () => {
  const [formData, { updateValues }] = useFormData({});

  const submitHandler = e => {
    e.preventDefault();

    console.log(formData);
  };

  return (
    <form onSubmit={submitHandler}>
      {formFields.map(item => (
        <TextField
          key={item.name}
          onChange={updateValues}
          fullWidth
          {...item}
        />
      ))}
      <Button type="submit" fullWidth>
        submit
      </Button>
    </form>
  );
};

CodeSandbox example

Can we go even further? YES WE CAN!

Let's take the example with two forms, what do we have duplicated now?

Well for starters we have the submitHandler and the actual <form> it self. Working on the useFormData hook, we can create a useForm hook.

import React, { useState } from "react";
import { Button, TextField } from "@material-ui/core";

const useForm = (
  initialFormDataValue = {},
  initalFormProps = {
    fields: [],
    props: {
      fields: {},
      submitButton: {}
    },
    handlers: {
      submit: () => false
    }
  }
) => {
  const [formData, setFormData] = useState(initialFormDataValue);

  const updateValues = ({ target: { name, value } }) => {
    setFormData({ ...formData, [name]: value });
  };

  const updateValuesParams = ({ target: { name, value } }) => {
    setFormData({ ...formData, [name]: value });
  };

  const formFields = initalFormProps.fields.map(item => (
    <TextField
      key={item.label}
      defaultValue={initialFormDataValue[item.name]}
      onChange={updateValues}
      {...item}
      {...initalFormProps.props.fields}
    />
  ));

  const submitForm = e => {
    e.preventDefault();

    initalFormProps.handlers.submit(formData);
  };

  const form = (
    <form onSubmit={submitForm}>
      {formFields}
      <Button type="submit" {...initalFormProps.props.submitButton}>
        Submit
      </Button>
    </form>
  );

  const api = {
    updateValues,
    updateValuesParams,
    setFormData,
    getFormFields: formFields
  };

  return [form, formData, api];
};

export default useForm;

It takes the useFormData hook from before and adds more components to it. Mainly it ads the form component and the formFields to the hook.

The hook now has 2 parameters when called.

- initialFormData

An object with the value that we want to initialise the formData with

- initalFormProps

An object with the configurations for the form

fields: Array with the fields objects
props: Object with props for the fields components(TextField in our case) and the submitButton component
handlers: The handler for submit in this case

The hook is called as followed

const Form = () => {
  const [form] = useForm(
    {},
    {
      fields: formFields,
      props: {
        fields: {
          fullWidth: true
        },
        submitButton: {
          fullWidth: true
        }
      },
      handlers: {
        submit: formData => console.log(formData)
      }
    }
  );

  return form;
};

CodeSandbox example

The advantage of this custom hook is that you can override all of the methods whenever you need it.

If need only the fields from the from and not the plain form you can get them via the api.getFormFileds method and iterate them as you need.

I will write an article explaining and showing more example of this custom hook

Optimisation

My most common enemy was the re rendering of the components each time the formData object was changed. In small forms that is not an issue, but in big forms it will cause performance issues.

For that we will take advantage of the useCallback and useMemo hooks in order to optimise as much as we can in our hook.

The main idea was to memoize all the inputs and the form since it is initialised with a value, it should change only when the value is changed and not in any other case, so it will not trigger any unnecessary renders.

I ended up with the following code for the hook

import React, { useState, useMemo, useCallback } from "react";
import { Button, TextField } from "@material-ui/core";

const useForm = (
  initialFormDataValue = {},
  initalFormProps = {
    fields: [],
    props: {
      fields: {},
      submitButton: {}
    },
    handlers: {
      submit: () => false
    }
  }
) => {
  const [formData, setFormData] = useState(initialFormDataValue);

  const updateValues = useCallback(
    ({ target: { name, value, type, checked } }) => {
      setFormData(prevData => ({
        ...prevData,
        [name]: type !== "chechbox" ? value : checked
      }));
    },
    []
  );

  const updateValuesParams = useCallback(
    (name, value) =>
      setFormData(prevData => ({
        ...prevData,
        [name]: value
      })),
    []
  );

  const formFields = useMemo(
    () =>
      initalFormProps.fields.map(item => (
        <TextField
          key={item.label}
          defaultValue={initialFormDataValue[item.name]}
          onChange={updateValues}
          {...item}
          {...initalFormProps.props.fields}
        />
      )),
    [updateValues, initalFormProps, initialFormDataValue]
  );

  const submitForm = useCallback(
    e => {
      e.preventDefault();

      initalFormProps.handlers.submit(formData);
    },
    [initalFormProps, formData]
  );

  const formProps = useMemo(
    () => ({
      onSubmit: submitForm
    }),
    [submitForm]
  );

  const submitButton = useMemo(
    () => (
      <Button type="submit" {...initalFormProps.props.submitButton}>
        Submit
      </Button>
    ),
    [initalFormProps]
  );

  const form = useMemo(
    () => (
      <form {...formProps}>
        {formFields}
        {submitButton}
      </form>
    ),
    [formFields, formProps, submitButton]
  );

  const api = useMemo(
    () => ({
      updateValues,
      updateValuesParams,
      setFormData,
      getFormFields: formFields
    }),
    [updateValues, updateValuesParams, setFormData, formFields]
  );
  return [form, formData, api];
};

export default useForm;

CodeSandbox example

Above and beyond

If we run the above example we would still have a render issue because of the submitForm callback, due to its formData dependency.

It's not the perfect case scenario but it's a lot better than no optimisation at all

My solution for this was to move the formData in the store. Since my submitHandler is always dispatch and I only send the action, I was able to access the formData directly from Redux Saga and therefore remove the formData from the hook and also from the dependency array of sumbitForm callback. This may not work for others so I did not include this in the article.

If someone has any thoughts on how to solve the issue with the formData from the submitForm I would be glad to hear them

Forem: Sabin Pandelovitch

[Material-UI] Migrating from react-autosuggest

The problem

The use case

The solution*

Live demo

Forms in React, a tale of abstraction and optimisation

Table of contents

The basics

An object to store the data

A handler to update the data

A handler to submit the data

Abstraction

- initialFormData

- initalFormProps

Optimisation

Above and beyond