Top 3 Gentleman Hooks for a React Developer on a Galleria

Some time ago, I was forced to poke around in the legacy left by the departed developer. Adding a feature to the code was a surgical operation that could easily break the viability of a page. Because of the heaped useEffect with links between themselves, most likely, in the end, the author himself did not understand how the code works. There was no linter on the project

The following hooks and made by analogy helped me a lot

1.useListEditor()

A hook that can be used to handle editing a list of items. Allows you to immediately get an already assembled array in a callback onChangewhich makes it easier to apply changes from the list

import { useListEditor } from "react-declarative";

export const EditableList = () => {
  const { 
    onRemoveItem,
    onUpdateItem,
    onAddItem,
    render,
  } = useListEditor(
    (id, item) => (
      <>
        <span>{`Label: ${item.label}`}</span>
        <span>{`Value: ${item.value}`}</span>
        <button
          onClick={() =>
            onUpdateItem(id, {
              label: prompt("label", item.label),
              value: prompt("value", item.value)
            })
          }
        >
          update
        </button>
        <button onClick={() => onRemoveItem(id)}>remove</button>
      </>
    ),
    {
      initialValue: [
        {
          label: "foo",
          value: "bar"
        }
      ],
      onChange: (items) => console.log(items)
    }
  );

  return (
    <>
      <button
        style={{
          marginBottom: 5
        }}
        onClick={() =>
          onAddItem({
            label: "fiz",
            value: "baz"
          })
        }
      >
        Add item
      </button>
      <div
        style={{
          display: "grid",
          gridTemplateColumns: "1fr 1fr auto auto",
          gridColumnGap: 5,
          gridRowGap: 5,
          maxWidth: 300
        }}
      >
        {render()}
      </div>
    </>
  );
};

export default EditableList;

View hook code useListEditor can here

2.useModalDialog()

A hook that allows you to display a modal window bound to the state of the component. The child element tree is drawn in <ModelProvider>which can be placed in App or another downstream component

import { useState } from "react";

import { useModal } from "react-declarative";

export const ModalDialogExample = () => {
  const [value, setValue] = useState(1);

  const { showModal, hideModal } = useModal(
    () => (
      <div>
        Sample modal with value {value}
      </div>
    ),
    [value]
  );

  return (
    <>
      <button onClick={showModal}>Show modal</button>
      <button onClick={hideModal}>Hide modal</button>
      <button onClick={() => setValue(value + 1)}>Increment</button>
    </>
  );
};

export default ModalDialogExample;

View hook code useModalDialog can here

3.useActualCallback()

Allows you to reach the actual callback link from useEffect even if the function is not listed in the dependencies or not all states used in the function are in the effect’s dependencies

It would seem that when opening the form, it should appear alert() with content {never: null}however, inside the callback the value initNotComplete will always be up to date

import { useState, useEffect, useLayoutEffect } from "react";

import { useActualCallback } from "react-declarative";

export const ActualCallbackExample = () => {
  const [initNotComplete, setInitNotComplete] = useState(true);

  const [filterData, setFilterData] = useState({
    never: null
  });

  const handleChange = useActualCallback(() => {
    if (!initNotComplete) {
      alert(JSON.stringify(filterData, null, 2));
    }
  });

  useEffect(() => {
    handleChange();
  }, [filterData]);

  useLayoutEffect(() => {
    setInitNotComplete(false);
  }, []);

  return (
    <button
      onClick={() =>
        setFilterData({
          foo: "bar"
        })
      }
    >
      Update filterData
    </button>
  );
};

export default ActualCallbackExample;

View hook code useActualCallback can here