Warnings when assigning to ref in render phase?

[jamesknelson]

Do you want to request a feature or report a bug?

Feature

What is the current behavior?

There are no warnings when assigning to ref.current in render phase.

What is the expected behavior?

Given that this mostly works now, but may cause issues on release of concurrent mode, it would be helpful to have a warning when assigning to a prop outside of useEffect().

E.g. I recently wrote this code, which works fine at the moment, and didn't realize the possible issue until @gaearon pointed out the missing useEffect():

export function useDidChange(value) {
  let ref = useRef()
  let didChange = ref.current !== value
  ref.current = value
  return didChange
}

If a warning is not possible due to the lazy initialization pattern, perhaps an eslint rule may be a solution?

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?

All versions

[markerikson]

Given that a ref object is just an object, I'm not sure how React would be able to warn about it unless some kind of special object with a set current() setter was returned in dev or something like that.

[aweary]

Given that a ref object is just an object, I'm not sure how React would be able to warn about it unless some kind of special object with a set current() setter was returned in dev or something like that.

React already defines special getters/setters for some objects in DEV (example) so it should be possible.

[mhuebert]

I am wondering if it is always "unsafe" to write to refs during render, or if one just needs to keep in mind that a render pass may be interrupted and code with that expectation.

For example, as an alternative to the didChange example above, one might keep a counter which increments whenever a new value is observed, something like:

function useCustomCompare(value, isEqual) {

   // store previous value + number of times we have seen a new value
  let current = useRef([value, 0]).current

  if !isEqual(value, current[0]) {
    // value has changed, increment counter
    current[1] = current[1] + 1
    }
  // update value for next comparison
  current[0] = value

  return current[1] // return counter value
}

useEffect(someFunction, [(useCustomCompare prop.X)])

Could it be "safe" to write during render as above, where the only guarantee you are looking for is that the counter increments whenever it sees a new value?

[eps1lon]

This would warn against a documented pattern: lazy object initialization.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contribution.

[stale]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please create a new issue with up-to-date information. Thank you!