Make it possible for interactions hooks to not update state and thereby not triggering rerenders

[joseDaKing]

@devongovett

Make it possible for interaction hooks to not update state and thereby not triggering rerenders because in my case I only use the interactions hooks for assigning data attributes to the underlying elements by using refs so I can target them through CSS and so it would be more performant because no react renders will occur.

My proposal is that interaction hooks that trigger rerender should have an option to not use setState inside the hook this update would not require breaking changes.

const result = useHover({
  // Should be false by default
  // Will make useHover to not setState
  noStateUpdate: true
})

// Should always be false when noStateUpdate is set to true
result.isHovered;

[snowystinger]

We do a lot with the state of interactions in order to set the correct accessibility, I'm not sure we could do something like this because then there'd be no updates to the rendered component. Can you explain more about your use case? Maybe I'm missing something. To give you an idea of where we're coming from, here are some examples of what we do with state in aria currently.

We need to potentially merge ids and cause a re-render, so we track that in state.

If focus is visible is another one we track in aria.

There may also be behavioral differences.

For instance, we might have a different screen reader announcement for someone using a mouse vs using a keyboard, it's information that is tracked in a hook and is rendered to the screen on a specific element. When the interaction mode changes, we need to make sure that the element is re-rendered to reflect that.

Or in the case of NumberFields, we only want to enable the mouse wheel spin when focus is within the field. https://github.com/adobe/react-spectrum/blob/main/packages/%40react-aria/numberfield/src/useNumberField.ts#L123

[joseDaKing]

I have useInteraction which merges most of the interaction hooks available in the @react-aria/interactions and it also adds data-attributes to the element it is assigned to so it can be targeted through the CSS. I thought the for example the isHovered property was only used by the end-user and not internally thereby I thought that the state update is unnecessary and it might cause render performance issues for large components. The userInteraction hook will be used in a base Box component which means it could update large parts. Maybe I am using the @react-aria/interactions in a wrong way