How to return mutated values from a custom React hook?

Question

I want to pass my component state to a custom hook and return true if my state changes as compared to initial state.

---

import { useRef, useEffect } from 'react'

export const useDirtyState = (props:any) => {
//Possibly use local state and set it to true and return that

  const isFirstRender = useRef<boolean>(true)
  const isDirty = useRef<boolean>(false)

  useEffect(() => {
    if (isFirstRender.current) {
      isFirstRender.current = false
      return
    }
    isDirty.current = true
    console.log(isDirty.current) // is true
  }, [props])
  console.log(isDirty.current) // I return this and it is false :(
} 

//In some other component 
const isDirty = useDirtyStaate(state)//Expect this to be true when state is changed

The problem is that the outer console.log shows false even if props change because my effect runs after that (I guess?). How do I return the correct value from this hook ?

---

Edit: I tried adding a local state to the hook and setting it to true and returning it. While this approach works, I was wondering if there is a cleaner way as it seems to cause 1 extra render.

Answer 1

Just store the original value in a ref and compare it to the value provided during render:

const {useRef, useState} = React;

// You can implement the value comparison using your preferred method
function areValuesEqual (value1, value2) {
  return Object.is(value1, value2);
}

/**
 * TS:
 * function useValueChanged <T>(value: T): boolean
 */
function useValueChanged (value) {
  const originalRef = useRef(value);
  return !areValuesEqual(originalRef.current, value);
}

function Example () {
  const renderCountRef = useRef(0);
  renderCountRef.current += 1;
  const [count, setCount] = useState(0);
  const increment = () => setCount(n => n + 1);
  const didChange = useValueChanged(count);
  
  return (
    <div>
      <div>Render count: {renderCountRef.current}</div>
      <div>Changed: {didChange ? 'Yes' : 'No'}</div>
      <button onClick={increment}>Clicks: {count}</button>
    </div>
  );
}

ReactDOM.render(<Example />, document.getElementById('root'));

<script src="https://unpkg.com/react@17.0.2/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.development.js"></script>

<div id="root"></div>