chore: enhance useTrackedEffect type

[xvxlb]

🤔 This is a ...

• New feature
• Bug fix
• Site / documentation update
• Demo update
• TypeScript definition update
• Bundle size optimization
• Performance optimization
• Enhancement feature
• Internationalization
• Refactoring
• Code style optimization
• Test Case
• Branch merge
• Other (about what?)

🔗 Related issue link

fix: #2195

💡 Background and solution

#2195

📝 Changelog

Language	Changelog
🇺🇸 English	chore: enhance useTrackedEffect type
🇨🇳 Chinese	chore: useTrackedEffect 类型修改

☑️ Self Check before Merge

⚠️ Please check all items below before review. ⚠️

• Doc is updated/provided or not needed
• Demo is updated/provided or not needed
• TypeScript definition is updated/provided or not needed
• Changelog is provided or not needed

[CLAassistant]

Thank you for your submission! We really appreciate it. Like many open source projects, we ask that you all sign our Contributor License Agreement before we can accept your contribution.
0 out of 3 committers have signed the CLA.

❌ wei.xue
❌ xvxlb
❌ crazylxr

---

wei.xue seems not to be a GitHub user. You need a GitHub account to be able to sign the CLA. If you have already a GitHub account, please add the email address used for this commit to your account.
_{You have signed the CLA already but the status is still pending? Let us recheck it.}

[liuyib]

I find a better way to do this:

import type { DependencyList } from 'react';
import { useEffect, useRef } from 'react';

- type Effect<T extends unknown[]> = (
+ type Effect<T extends DependencyList> = (
   changes?: number[],
-  previousDeps?: [...T],
+  previousDeps?: T,
-  currentDeps?: [...T],
+  currentDeps?: T,
) => void | (() => void);

const diffTwoDeps = (deps1?: DependencyList, deps2?: DependencyList) => {
  //Let's do a reference equality check on 2 dependency list.
  //If deps1 is defined, we iterate over deps1 and do comparison on each element with equivalent element from deps2
  //As this func is used only in this hook, we assume 2 deps always have same length.
  return deps1
    ? deps1
        .map((_ele, idx) => (!Object.is(deps1[idx], deps2?.[idx]) ? idx : -1))
        .filter((ele) => ele >= 0)
    : deps2
    ? deps2.map((_ele, idx) => idx)
    : [];
};

- const useTrackedEffect = <T extends unknown[]>(effect: Effect<T>, deps?: [...T]) => {
+ const useTrackedEffect = <T extends DependencyList>(effect: Effect<T>, deps?: [...T]) => {
  const previousDepsRef = useRef<T>();

  useEffect(() => {
    const changes = diffTwoDeps(previousDepsRef.current, deps);
    const previousDeps = previousDepsRef.current;
    previousDepsRef.current = deps;
    return effect(changes, previousDeps, deps);
  }, deps);
};

export default useTrackedEffect;

I think the built-in type DependencyList is better than unknown[], what do you think? @xvxlb

[xvxlb]

@liuyib This seems to be more accurate 👍

[liuyib]

Nice work, thx

[xvxlb]

@liuyib need merge.

[liuyib]

@liuyib need merge.

I don't have permission to merge :)

@crazylxr review, pls