React usePrevious Hook


Hooks are important for the practical part sample in React. One frequent logic comparability with class elements was evaluating a earlier prop worth with a present prop worth through lifecycle strategies. So what’s a straightforward sample for duplicating earlier worth comparisons in practical elements?

The useRef and useEffect hooks enable us handle that very same performance in practical elements through a customized hook — usePrevious:

import { useEffect, useRef } from 'react';

export perform usePrevious(worth) {
  const ref = useRef();
  useEffect(() => {
    ref.present = worth;
  }, [value]);
  return ref.present;

// Utilization
export perform MyComponent(props) {
  const { title } = props;
  const previousName = usePrevious(title);

  if(title != previousName) {
    // Do one thing

I really like this usePrevious hook, if solely as a result of I continuously neglect to make use of the .present property and it helps keep away from some boilerplate code. What are your ideas on this sample? Do you will have any customized hooks you depend on?

  • Create Spinning Rays with CSS3: Revisited
  • From Webcam to Animated GIF: the Secret Behind!
  • MooTools 1.3 Browser Object

    MooTools 1.3 was simply launched and one of many massive additions is the Browser object.  The Browser object may be very useful in that not solely do you get details about browser kind and browser variations, you’ll be able to acquire details about the consumer’s OS, browser plugins, and…

  • Drag and Drop MooTools File Uploads

    Honesty hour confession:  file importing inside the internet browser sucks.  It simply does.  Just like the ugly SELECT ingredient, the file enter is sort of unstylable and appears completely different on completely different platforms.  Add to these criticism the truth that we’re all used to tug and drop operations…