Skip to content

Instantly share code, notes, and snippets.

@Quadriphobs1

Quadriphobs1/Form.js

Last active June 17, 2019 18:42
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save Quadriphobs1/076981cc23509abe172fac14429d9a37 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save Quadriphobs1/076981cc23509abe172fac14429d9a37 to your computer and use it in GitHub Desktop.
Download ZIP
React Form State Management
Raw
README.md

This is a form state management tools in react that I started to adopt and still believes it can be improved. However, this has proven to improve performance and code readability since I started to adopt it.

HOW IT WORKS

This brings about creating 3 files for form state however, it is really easy to use.

  1. Form.js this is the file which house the render components of the UI without any business logic or any state management, you can see it is just a functional component
  2. FormContext.js In order to avoid passing of props down many levels, the React context is my favourite lately. It basically used to pass down props in the hierarchy and helps to avoid multiple re-rendering of the component if a state or props changes.
  3. FormProvider am still thinking of a suitable name to call this however, this is where the business logic and manipulation takes place, this handles the state, and pass down to the props, this also handles and form handlers.

Using this type of architecture I have seen a lot of performance gains and code tends to very clean when I separate the UI from the logics

Raw
Form.js
// @flow
import React, { Fragment } from "react";
import FormContext from "./FormContext";
const Form = () => (
<FormProvider>
<FormContext.Consumer>
{({ email, password, handleChangePassword, handleChangeEmail, handleSubmit }) => (
<form
onSubmit={handleSubmit}
>
<TextField value={email} onChange={handleChangeEmail} {...fieldProps} />
<TextField value={password} onChange={handleChangePassword} {...fieldProps} />
<Button
type="submit"
onClick={handleSubmit}
>
Proceed
</Button>
</form>
)}
</FormContext.Consumer>
</FormProvider>
);
export default Form;
Raw
FormContext.js
// @flow
import { createContext } from "react";
type ContextType = {
email: string,
password: string,
handleChangePassword: (e: SyntheticInputEvent<*>) => void,
handleChangeEmail: (e: SyntheticInputEvent<*>) => void,
handleSubmit: () => Promise<void>,
};
const FormContext = createContext<ContextType>({});
export default FormContext;
Raw
FormProvider.js
// @flow
import React, { Component, type Node } from "react";
import FormContext from "./FormContext";
class AuthProvider extends Component<
{ children: Node },
{ email: string, password: string }
> {
state = {
email: "",
password: ""
};
handleChangeEmail = (e: SyntheticInputEvent<*>) =>
this.setState({ email: e.target.value });
handleChangePassword = (e: SyntheticInputEvent<*>) =>
this.setState({ password: e.target.value });
handleSubmit = () => new Promise((resolve) => setTimeout(resolve, 2000)));
render() {
return (
<FormContext.Provider
value={{
...this.state,
handleChangePassword: this.handleChangePassword,
handleChangeEmail: this.handleChangeEmail
handleSubmit: this.handleSubmit
}}
>
{this.props.children}
</FormContext.Provider>
);
}
}
export default FormProvider;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment