hooks use-trace-update.ts

0% Statements 0/12

0% Branches 0/6

0% Functions 0/3

0% Lines 0/11

Press n or j to go to the next uncovered block, b, p or k for the previous block.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28  
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
  import { useRef, useEffect } from "react";
 
// Use to determine why a component rerendered
// By supplying an object of prop/state values to track
// e.g. useTraceUpdate({id, name, children})
 
export const useTraceUpdate = (
  props: Record<string, unknown>,
  prefix?: string
) => {
  const prev = useRef(props);
 
  useEffect(() => {
    const changedProps = Object.entries(props).reduce((acc, [key, value]) => {
      Iif (prev.current[key] !== value) {
        acc[key] = [prev.current[key], value];
      }
      return acc;
    }, {} as Record<string, unknown>);
 
    Iif (Object.keys(changedProps).length > 0) {
      console.log((prefix ?? "") + "Changed props:", changedProps);
    }
 
    prev.current = props;
  });
};