https://github.com/simbathesailor/use-effect-x
🌟 useEffectX 🌟 : An alternative and drop-in replacement for useEffect which provide previous values of dependency items out of the box.
https://github.com/simbathesailor/use-effect-x
react useeffect
Last synced: about 1 month ago
JSON representation
🌟 useEffectX 🌟 : An alternative and drop-in replacement for useEffect which provide previous values of dependency items out of the box.
- Host: GitHub
- URL: https://github.com/simbathesailor/use-effect-x
- Owner: simbathesailor
- License: mit
- Created: 2020-08-13T11:23:13.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2020-08-17T16:57:18.000Z (almost 5 years ago)
- Last Synced: 2025-04-01T17:53:34.876Z (about 2 months ago)
- Topics: react, useeffect
- Language: TypeScript
- Homepage: https://codesandbox.io/s/usexeffect-7ougo?file=/src/App.tsx
- Size: 157 KB
- Stars: 15
- Watchers: 2
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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
```sh
yarn add use-effect-x
```
If you use npm. Run
```
npm i use-effect-x
```
## Usage
```jsx
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 (
countA -> {countA}
countB -> {countB}
{
setCountA(countA + 1);
}}
>
Change count A
{
setCountB(countB + 1);
}}
>
Change count B
);
}
```
## When not needed the arguments, you can use it exactly same as useEffect
```jsx
useEffectX(() => {}, [countA, countB]);
useEffectX(() => {});
```