Top React Hooks — Forms and Forward Refs

Photo by Heather Lo on Unsplash

Hooks contains our logic code in our React app.

We can create our own hooks and use hooks provided by other people.

In this article, we’ll look at some useful React hooks.


The react-use library is a big library with many handy hooks.


The useMethods hook is a simpler useReducer hook implementation.

It lets us cache states so it’s useful for using complex computations.

For instance, we can write:

import React from "react";
import { useMethods } from "react-use";
const initialState = {
count: 0
function countMethods(state) {
return {
reset() {
return initialState;
increment() {
return { ...state, count: state.count + 1 };
decrement() {
return { ...state, count: state.count - 1 };
export default function App() {
const [state, methods] = useMethods(countMethods, initialState);
return (
<button onClick={methods.increment}>increment</button>
<button onClick={methods.decrement}>decrement</button>
<button onClick={methods.reset}>reset</button>

We created the countMethods function with the methods we can use to manipulate our state .

It returns the state as we want to by returning an object with various methods.

reset returns the initial state.

increment returns a state with count increased by 1.

decrement returns a state with count decreased by 1.

We passed the countMethods function into the useMethods hook along with the initialState .

Then that returns the state and the methods object that has the methods returned by countMethods .

We then called them when we click the buttons.


The useEnsuredForwardedRef hook letrs us forward refs to a child component.

For instance, we can write:

import React from "react";
import { useEnsuredForwardedRef } from "react-use";
const Foo = React.forwardRef((props, ref) => {
const ensuredForwardRef = useEnsuredForwardedRef(ref);
React.useEffect(() => {
}, []);
return <div ref={ensuredForwardRef} />;
export default function App() {
return (
<Foo />

to use the hook.

We just pass in a ref to the useEnsuredForwardRef hook and it’ll return ensuredForwardRef .

It’ll never be undefined , so we can use it as we do in the useEffect callback.


React-useFormless is a simple library that lets us create forms with a simple hook.

We can install it by running:

yarn add react-useformless


npm install react-useformless

Then we can use it by writing:

import React from "react";
import useFormless from "react-useformless";
const options = {
initialValues: {
name: "",
password: ""
validate: (name, value) => {
const validators = {
name: name => (name.length > 0 ? "" : "name is requred"),
password: password => (password.length > 0 ? "" : "password is required")
const errorFn = validators[name];
return errorFn(value);
onError: (ev, { values, errors }) => {
onSuccess: (ev, { values }) => {
onSubmit: ev => {
export default function App() {
const { values, errors, inputProps, onSubmit } = useFormless(options);
return (
<form onSubmit={onSubmit}>
<label htmlFor="name">name</label>
<label htmlFor="password">password</label>
<input type="submit" value="Login" />

We have the options object with the options.

initialValues has the initial values of the form.

validate is a function that returns an error object after validation.

The returned object should have the keys with the input names and values being the error message.

onError , onSuccess and onSubmit are handlers that are run when those events are emitted.

We pass in the whole object to the useFormless hook.

It returns an object with the variables we can use in our form.

inputProps pass in the input elements.

onSubmit is the submit handler.

errors has the error messages.

values has the input values for each field.

Photo by Kyle Glenn on Unsplash


React-use is a versatile hooks library.

React-useFormless lets us create forms easily with our React app.

Web developer. Subscribe to my email list now at Email me at

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store