Stack Overflow
Stack Overflow

Questions tagged [react-ref]

Refs provide a way to access DOM nodes or React elements created in the render method.

Refs provide a way to access DOM nodes or React elements created in the render method.

In the typical React dataflow, props are the only way that parent components interact with their children. To modify a child, you re-render it with new props. However, there are a few cases where you need to imperatively modify a child outside of the typical dataflow. The child to be modified could be an instance of a React component, or it could be a DOM element. For both of these cases, React provides an escape hatch.

For more information refer to the Official Refs and the DOM documentation.

252 questions
71
votes
2 answers

How do we know when a React ref.current value has changed?

Normally, with props, we can write componentDidUpdate(oldProps) { if (oldProps.foo !== this.props.foo) { console.log('foo prop changed') } } in order to detect prop changes. But if we use React.createRef(), how to we detect when a ref has…
trusktr
  • 44,284
  • 53
  • 191
  • 263
53
votes
5 answers

React-Native scroll to top with Flatlist

I'm having a lot of trouble scrolling to the top of my Flatlist so any help would be greatly appreciated! Essentially it fetches the first 5 items from firebase, then when onEndReached is called we append the next 5 items to the list: data:…
Dereck
  • 703
  • 1
  • 7
  • 10
52
votes
6 answers

this.refs.something returns "undefined"

I have an element with a ref that is defined and ends up getting rendered into the page :
...
I want to access the DOM element properties like offset... or something. However, I keep getting undefined…
John Doe
  • 3,559
  • 15
  • 62
  • 111
20
votes
1 answer

Store a callback in useRef()

Here is an example of a mutable ref storing the current callback from the Overreacted blog: function useInterval(callback, delay) { const savedCallback = useRef(); // update ref before 2nd effect useEffect(() => { savedCallback.current =…
bela53
  • 3,040
  • 12
  • 27
20
votes
1 answer

TypeScript issues when creating ref for React Native TextInput

I came across an issue when defining refs i.e. inputRef = React.createRef(null) //... const someFunction () => { if (this.inputRef && this.inputRef.current) { this.inputRef.current.focus() } } //... When I…
Ilja
  • 44,142
  • 92
  • 275
  • 498
17
votes
3 answers

React/Typescript forwardRef types for an element which returns either an input or textArea

I'm trying to create a generic text input component for our application using react and typescript. I want it to be able to either be an input element or a textarea element based on a given prop. So it looks somewhat like this: import {TextArea,…
picklechips
  • 746
  • 2
  • 8
  • 28
14
votes
2 answers

How correctly pass a node from a ref to a context?

I'm trying to pass a node from a ref to a context. But because I have no re-render after the first render, the passed node is null. I thought about two variants (but I think they aren't the best): To pass ref instead of ref.current. But then in use…
sergdenisov
  • 8,327
  • 9
  • 48
  • 63
13
votes
2 answers

Why can't you pass a ref to a functional component in react?

Why can't you pass a ref to a functional component in react? What is different in function components compared to class components that you can't pass a ref to it? Why is that not possible? Notes: I'm making this question, because I always saw…
Vencovsky
  • 28,550
  • 17
  • 109
  • 176
12
votes
2 answers

Using createRef in react-native with typescript?

I am trying to figure out how I need to use React.createRef() in react native with typescript as following code throws errors // ... circleRef = React.createRef(); componentDidMount() { this.circleRef.current.setNativeProps({ …
Ilja
  • 44,142
  • 92
  • 275
  • 498
9
votes
1 answer

why do we need React forwardRef if we can simple pass the created ref in props?

The correct way of passing refs to child components as per react documentation is like this: import React from 'react'; const Input = React.forwardRef((props, ref) => { React.useEffect(() => { ref.current.focus(); }, []); return
Himmature
  • 106
  • 1
  • 2
9
votes
1 answer

React storing Ref elements in Redux

How would you go about storing Ref elements in Redux and would you do it at all? I have a component containing some form elements where I need to store the state of which field in the form the user had selected if they leave the page and come…
zkwsk
  • 1,960
  • 4
  • 26
  • 34
9
votes
2 answers

Why is a React Ref callback (as an arrow function or inline function) called multiple times on initial page load?

Please refer to this URL in the React DOCS. A version of this code is also available here. I understand that inside a Functional React Component, it is preferred to use the useCallback hook to create a ref callback as shown in the React Docs URL…
Alan C. S.
  • 14,718
  • 2
  • 20
  • 16
8
votes
2 answers

ref scrollIntoView does not work with behavior smooth on react

I am creating a component that will hold a dynamic list of elements and for styling reasons, I need to keep the title for each section in a sticky nav menu. As the user scrolls up and down the list of sections I need to apply styling rules and also…
Gareth Townsend
  • 119
  • 2
  • 8
8
votes
2 answers

Differences between `useRef` and ref variable in ReactJS

I have this const CompA = () => { let _input; return ( _input = el} type="text" /> ); } And this const CompB = () => { const _input = useRef(null); return ( ); } Two _input…
Trí Phan
  • 1,123
  • 2
  • 15
  • 33
7
votes
1 answer

ReactJS - ref not working with connect and redux-form

I am having a problem while using ref via connect and redux-form together. The structure of component is such that the ChildComponent has Forms and I am using class EditEvent extends Component { constructor (props) { super(props); …
iphonic
  • 12,615
  • 7
  • 60
  • 107
1
2 3
…
16 17