use-effect-x

use-effect-x

An alternative to useEffect which provide extra info to work with updates

---

Why it is needed ?

Most of the times we need to respond to updates in our components, where we need to compare previous values and current values. Remember we had the same thing with componentDidUpdate in class based components earlier. useEffect today are not capable to do so out of the box. you need to put in extra effort to get the previous and current values.

We will focus on the function components now, as they are the most prominent way of developing components today.

In functional components we typically make use of usePrevious custom hooks. That definetly works. But, you need to do extra work of adding usePrevious hooks for individual items in useEffect dependency.

What if we have the access of previous and new values in useEffect callback also, so that we dont have to do that extra work of writing usePrevious hooks.

---

So there you go, I try to solve the problem using useEffect alternative which provides extra info about the dependencies , tells you what changed, previous values, current values and first run for the starters

Install

If you use yarn. Run

yarn add use-effect-x

If you use npm. Run

npm i use-effect-x

Usage

import { useEffectX } from 'use-effect-x';

export default function App() {
  const [countA, setCountA] = React.useState(0);
  const [countB, setCountB] = React.useState(0);

  useEffectX(
    ({ changedItem: [changeObjcountA, changeObjcountB] }) => {
      // Here you have complete access to what changed

      //changeObjcountA contains
      // {
      // previous // previous value
      // next, // current value
      // changed: // has changed
      // isFirstRun: // is running for the first time
      // }

      console.log('changed Item', changeObjcountA, changeObjcountB);

      // As changedItem is an array, you can access via in
      // console.log(
      //   `count ${changedItem[0]?.changed ? 'changed' : 'not changed'} from ${
      //     changedItem[0]?.previous
      //   } to ${changedItem[0]?.next}`
      // );
    },
    [countA, countB]
  );

  return (
    <div className="App">
      countA -> {countA}
      countB -> {countB}
      <button
        onClick={() => {
          setCountA(countA + 1);
        }}
      >
        Change count A
      </button>
      <button
        onClick={() => {
          setCountB(countB + 1);
        }}
      >
        Change count B
      </button>
    </div>
  );
}