React and Redux: Using state or refs?

Question

I'm currently teaching my self Redux. For this purpose I created a simple Todo application. Now on this application I'm currently at the process of using dispatch() to put a todo into my store. This is a question about your opinion. I want to avoid code smell.

I found two ways of achieving this. One using state and one using ref. I was wondering which way is better? Thank you for any advice. The two versions are below.

Version one using ref:

import React, { Component } from "react";
import Todo from "./Todo";
import { connect } from "react-redux";
import { ADD_TODO } from "./actionCreators";

class TodoList extends Component {
  taskRef = React.createRef();
  handleSubmit = event => {
    event.preventDefault();
    this.props.dispatch({
      type: ADD_TODO,
      task: this.taskRef.current.value
    });
    event.currentTarget.reset();
  };
  render() {
    let todos = this.props.todos.map((val, index) => (
      <Todo task={val.task} key={index} />
    ));
    return (
      <div>
        <form onSubmit={this.handleSubmit}>
          <label htmlFor="task">Task </label>
          <input type="text" name="task" id="task" ref={this.taskRef} />
          <button type="submit">Add a Todo!</button>
        </form>
        <ul>{todos}</ul>
      </div>
    );
  }
}

const mapDispatchToProps = state => ({
  todos: state.todos
});

export default connect(mapDispatchToProps)(TodoList);

And here is the second version using state:

import React, { Component } from "react";
import Todo from "./Todo";
import { connect } from "react-redux";
import { ADD_TODO } from "./actionCreators";

class TodoList extends Component {
  state = {
    task: ""
  };
  handleSubmit = event => {
    event.preventDefault();
    this.props.dispatch({
      type: ADD_TODO,
      task: this.state.task
    });
    event.target.reset();
  };
  handleChange = event => {
    event.persist();
    this.setState((state, props) => ({
      [event.target.name]: event.target.value
    }));
  };
  render() {
    let todos = this.props.todos.map((val, index) => (
      <Todo task={val.task} key={index} />
    ));
    return (
      <div>
        <form onSubmit={this.handleSubmit}>
          <label htmlFor="task">Task </label>
          <input
            type="text"
            name="task"
            id="task"
            onChange={this.handleChange}
          />
          <button type="submit">Add a Todo!</button>
        </form>
        <ul>{todos}</ul>
      </div>
    );
  }
}

const mapDispatchToProps = state => ({
  todos: state.todos
});

export default connect(mapDispatchToProps)(TodoList);

EDIT: As qasimalbaqali pointed out in the comments here is a similar post on stackoverflow. I'm still unsure, because the first answer says refs are bad with reasons, the second one says React Devs say refs are awesome for grabbing values from the dom (which is what I'm doing!).

Have this a read. It explains using state vs ref. In summary the author prefers to use state instead, and the author gives reasons for this https://stackoverflow.com/questions/29503213/use-state-or-refs-in-react-js-form-components — qasimalbaqali, Jun 25 '18 at 12:31
I don't use refs at all and can solve most problems with just state. — Tall Paul, Jun 25 '18 at 12:41
@qasimalbaqali I read it, but I think the answers there are pretty mixed. I read it, that In the use case of form inputs it is suggested to use refs. Hmm... — J. Hesters, Jun 25 '18 at 12:43
I'd personally use state wherever you can in React, Facebook are against using refs often. https://reactjs.org/docs/refs-and-the-dom.html#dont-overuse-refs — Alex Catchpole, Jun 25 '18 at 12:45
I think the general consensus is that state should take precedence over refs. Speaking from my own experience, I recently finished writing a react frontend for a web app, and didn't need to use refs at all (or redux). I think input reading is the wrong use case for them, or at least a waste of react's excellent and state and event management capabilities — SrThompson, Jun 25 '18 at 12:51

score 3 · Accepted Answer · answered Jun 25 '18 at 17:37

3

Thank you for anyone helping. It seems like a majority of the community is in favor of using state.

I also asked Dan Abramov, who said that he'd prefer a ref in this case. You can see his answer here.

Thank you everyone for your input and advice! :)

answered Jun 25 '18 at 17:37

J. Hesters

13,117
31
133
249

React and Redux: Using state or refs?

1 Answers1