How to deal with using refs in pure functional components?

[imranismail]

Say for example I have a need for refs when building a chat app and expecting the chat box to scroll down when new messages arrive.

[Wildhoney]

In that particular case I'd be more inclined to use the URL hash to move to the bottom, rather than manipulating DOM elements directly — maybe even calling it last-message to make it clearer.

However you do make a good point. I admit there will be a handful of cases with which you'll want to manipulate DOM elements through refs – in those cases you would have to use a regular React component. We could pass in refs through Keo, but think for the minority of cases where you would require it, it doesn't justify its inclusion.

Thoughts?

[eisisig]

I've actually been missing it a bit. For simple things like resetting inputs when calling an action. Sometimes more plumbing to keep track of those inside some reducer state.

But maybe I'm just used to being able to access the refs so finding another solution for those times seems wonky now at least

[Wildhoney]

Ideally you should model the entire form in Redux, and so resetting the form would be one simple action to empty the values, these empty values are then propagated through the components and the inputs are reset.

Using refs to directly manipulate DOM elements is strongly discouraged in React – you should be either passing them through as props — which is the Keo approach — or maintain a local component state using setState, state, etc... and then setting their values to state.name, etc...

[eisisig]

Ahh yes in the perfect world :) But we are creating standalone components that should work within redux, angular etc... So our own implementation uses redux and co but we can't have that as a dependency for the components to work. But yes you are right

[Wildhoney]

@eisisig I share your pain! We have lots of horrific legacy code at work that needs to be dealt with and refactored accordingly.

[eisisig]

Don't get me started ;) But I think the pureness that keo brings and the more functional approach outweight the missing refs. So great job

[developit]

What about using Function refs instead of String refs? String refs will eventually be removed from React anyway, I didn't even implement them in preact since they seem ill-fated.

[imranismail]

@developit can you give an example on functional refs

[developit]

class Foo {
  render() {
    return (
      <div>
        <OtherComponent ref={ c => this.otherComponent = c } />
      </div>
    );
  }
}

Working example:
https://jsfiddle.net/developit/x8qpzjdf/

Here's a little helper function that emulates the behavior of string refs using function refs:

https://gist.github.com/developit/63e7a81a507c368f7fc0898076f64d8d

[neverfox]

One common use case for ref that I still run across is the need to run public component methods on some third-party components. While I'd prefer authors not create these kinds of APIs in the first place, they're still somewhat ubiquitous and all assume the use of ref as a way to hook into the API via the smart component parent. See for example: caseywebdev/react-list#90