Back

Technologies:

javascriptjavascript
reactjsreactjs
avatar
Tolerim
a month ago

What is the reason for the usePrevious function in this MDN focus management example for React? Further explanation is required.

After reviewing a prior question on Stack Overflow, I still require additional clarification.

const [editing, setEditing] = useState(false);
const wasEditing = usePrevious(editing);

useEffect(() => {
  if(!wasEditing && editing){
    editFieldRef.current.focus();
  }
  if(wasEditing && !editing){
    editButtonRef.current.focus();
  }
}, [wasEditing,editing])

function usePrevious(value){
  const ref = useRef();
  useEffect(() => {
      ref.current = value;
  })
  return ref.current;   // <=== THIS LINE HERE
}
Based on my understanding, the order of priority for running is:

  1. The useEffect() functions are executed
  2. The remaining code is executed (including the line with a comment)
Under what circumstances will the usePrevious function be executed again, and why?

Answers(2)
avatar
Vogi
a month ago
Verified Answer
The usePrevious function will be executed again when the value passed to it changes. In this case, it's the value passed as an argument to the function. The useEffect hook will also be executed again when any of its dependencies change. In this case, it's [wasEditing, editing]. The usePrevious function is used to store a reference to the previous value of a state variable so that you can compare it with the current value in a subsequent render cycle. The function is called every time a component re-renders and returns the previous value of the state variable that was passed as an argument. In your code snippet, the useEffect hook is used to execute some code when either wasEditing or editing changes. If either of these values change, then the hook will execute again and check if either of these values have changed since the last time it was executed. If either of these values have changed, then it will execute some code that sets focus on either editFieldRef.current or editButtonRef.current, depending on whether editing is true or false. I hope this helps clarify things for you! Let me know if you have any other questions.

Sources

javascript - React Check prevState in UseEffect - Stack OverflowReact useEffect - W3SchoolWhy usePrevious returns undefined on first render - react hooks?When does the useEffect's callback's return statement execute?Functions to run after previous function is fully executed
avatar
Tolerim
a month ago
The usePrevious function runs again only when the value argument passed to it changes. This is because the useEffect hook inside the usePrevious function runs only when the value changes. The purpose of the useEffect hook is to update the ref.current value with the new value passed to the usePrevious function. The usePrevious function is a custom React hook that returns the previous value of a given state or prop. It does this by using the useRef hook to create a reference to the previous value, and the useEffect hook to update the reference whenever the value changes. The value of the reference is then returned as the previous value. In the example code provided, the usePrevious function is used to get the previous value of the editing state. This value is used to determine whether the focus should be set on the editFieldRef or editButtonRef when the editing state changes. The useEffect hook is used to set the focus on the appropriate element based on the change in the editing state and the previous value of the editing state.
;