Using Facade pattern create react custom hooks as Reusable and Reliable

The essential thing when approaching design patterns is to utilize them in a way that improves our codebase. The above means that we sometimes can bend them to fit our needs. The Facade design pattern is commonly associated with object-oriented programming. That doesn’t change the fact that we can take its fundamentals and apply them to something else.

In this article, we explore the Facade pattern both in a conventional setting and with React hooks.

In case if you do not have any idea about the basics of ReactJs and how to start with it, you can refer to link

If you are still not sure what it is Facade design pattern will explain with some examples.

Facade design pattern straightforward way and keep our application more readable

Custom Hooks using the Facade design pattern

The magic with our approach is how quickly and easily we implemented these features with minimal code and how we integrated those features into our views simple.

Example 1: Modal

import React from "react";

export default () => {
  let [modal, setModal] = React.useState(false);
  let [modalContent, setModalContent] = React.useState("I'm the Modal Content");

  let handleModal = (content = false) => {
    setModal(!modal);
    if (content) {
      setModalContent(content);
    }
  };

  return { modal, handleModal, modalContent };
};

we have more than one component that initializes the same state structure and methods it may be a good idea to extract those in a custom hook, and we can have the state and the methods in one place and reuse it.

Example 2: Toggle

This one is probably my favorite and I use it fairly often in projects I work on.

import React, { useState } from "react";

const useToggle = (initialValue = true) => {
  const [value, setValue] = useState(initialValue);
  return [
    value,
    {
      set: setValue,
      toggle: () => setValue(flag => !flag)
    }
  ];
};

Example 3: Form data set and submit with callback Function

Every form will have multiple fields and handle change events and form submissions.

Breaking down what is going on here, we want to:

• Keep track of state for an input field
• Update the value on change
• Make the field value available to the submit handler

import {useState} from 'react';

const useFilterHook = (initialValues, callback) => {
  const [inputs, setInputs] = useState(initialValues);
  const handleSubmit = (event) => {
    if (event) event.preventDefault();
      callback();
  }
  const handleInputChange = (event) => {
    event.persist();
    setInputs(inputs => ({...inputs, [event.target.name]: event.target.value}));
  }
  return {
    handleSubmit,
    handleInputChange,
    inputs
  };
}
export default useFilterHook;

I'm excited to see how leveraging them can start cleaning up and simplifying the code I am working on today. If you're interested in learning more about how to start applying it in your own code, stayed tuned for my upcoming post.

Happy Coding!