Create Ref using React.createRef without using constructor in React?

Question

Basically, I have used constructor in React for only 3 reasons -

1. To initialize `state` like -

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = { counter: 0 };
    }
}

but due to Babel's class-field support, I don't use it anymore

class App extends React.Component {
    state = { counter: 0 };
}

2. To `bind` functions like -

class App extends React.Component {
    constructor(props) {
        super(props);
        this.increment.bind(this);
    }

    increment() {

    }
}

but due to arrow functions, I don't do it anymore

class App extends React.Component {
    increment = () => {

    }
}

3. To use `createRef` like -

class App extends React.Component {
    constructor(props) {
        super(props);
        this.inputRef = React.createRef();
    }
}

So can I use React.createRef without using constructor in React?

Ana Liza Pandac · Accepted Answer · 2019-01-18 16:48:07Z

27

You can declare it as an class field just like state.

class App extends React.Component {
  state = { counter: 0 };
  inputRef = React.createRef();
}

Babel will transpile it into something like the code below in stage-2 presets.

constructor(props) {
    super(props);

    this.state = { counter: 0 };
    this.inputRef = React.createRef();
  }

edited Jan 18, 2019 at 16:48

answered Jan 18, 2019 at 16:34

Ana Liza Pandac

4,8912 gold badges26 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Chris · Accepted Answer · 2019-01-18 16:36:59Z

7

Yes, you can. For example:

const MyComponent = () => {
  const inputRef = React.createRef();

  return (
    <input ref={inputRef} />
  );
}

The only thing you cannot do, is pass the ref attribute to a functional component:

render() {
  // This won't work.
  return <MyFunctionalComponent ref={this.inputRef} />
}

More info from the official docs, here:

You can, however, use the ref attribute inside a function component as long as you refer to a DOM element or a class component:

answered Jan 18, 2019 at 16:36

Chris

59.7k20 gold badges121 silver badges144 bronze badges

Comments

Avanthika · Accepted Answer · 2019-01-18 16:34:54Z

4

you can create a ref with ref callbacks without using constructor. <input ref={(element) => { this.inputRef = element; }} /> is what you need.

answered Jan 18, 2019 at 16:34

Avanthika

4,1821 gold badge15 silver badges19 bronze badges

Comments

AmerllicA · Accepted Answer · 2020-02-23 14:58:07Z

3

On class components write like below:

import React, { Component, createRef } from 'react';

class App extends Component {
  inputRef = createRef();

  render() {
    return (
      <div ref={this.inputRef}~~~
    );
  }
}

On functional components write like below:

import React, { useRef } from 'react';

const App = () => {
  const inputRef = useRef(null);

  return (
    <div ref={inputRef}~~~
  );
};

Definitely, the referenced element is mutable object but it should persist for the full lifetime of the component. it is not my opinion, this words are for ReactJS docs.

answered Feb 23, 2020 at 14:58

AmerllicA

33.2k18 gold badges146 silver badges170 bronze badges

Comments

Mohamed Ramrami · Accepted Answer · 2019-01-18 16:31:20Z

2

Yes. Exactly as you did with the state (with Babel's class-field support):

class App extends React.Component {
    inputRef = React.createRef();
}

answered Jan 18, 2019 at 16:31

Mohamed Ramrami

12.8k4 gold badges41 silver badges51 bronze badges

Collectives™ on Stack Overflow

Create Ref using React.createRef without using constructor in React?

1. To initialize `state` like -

2. To `bind` functions like -

3. To use `createRef` like -

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1. To initialize state like -

2. To bind functions like -

3. To use createRef like -

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related

1. To initialize `state` like -

2. To `bind` functions like -

3. To use `createRef` like -