Replacing React Classes with Hooks

Note: React Hooks are still an experimental proposal. This post was written while Hooks were in React 16.7.0-alpha.2

Note: Even if Hooks become an official React feature, they aren’t replacing classes, and the React docs don’t recommend huge rewrites replacing classes with Hooks.

I’m at the point in learning React where I’ve written some apps that use both class components and functional components. Admittedly, I should probably be focusing on using React’s core functionalities to develop larger apps before I start delving into its unreleased/experimental stuff, but I could not resist! After watching some talks from React Conf 2018, I decided to rewrite some of my current code using React Hooks. I wanted to write a post walking through a bit of my experience with it.

The app I’ll convert consists of two components. The first is the root component, App.js. This contains one child component and a simple paragraph tag that I’ll use to demonstrate the same “lifting up state” concept from classic React. Note that these two apps are identical in functionality; they both do the exact same thing: handle changes to the search bar text, clear the text when a user clicks inside, and updates state when the user submits.

I’ll begin by showing the conversion of the root component.

Here’s the old App.js:

import React, { Component } from "react";

import SearchBar from "./oldApp/SearchBar";

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      searchText: ""
    };

    this.updateSearch = this.updateSearch.bind(this);
  }

  updateSearch(newText) {
    this.setState({ searchText: newText });
  }

  render() {
    return (
      <div className="App">
        <SearchBar onSearchSubmit={this.updateSearch} />
        <p>You searched for: {this.state.searchText}</p>
      </div>
    );
  }
}

export default App;

import React, { Component } from "react";

import SearchBar from "./oldApp/SearchBar";

class App extends Component {

constructor(props) {

super(props);

this.state = {

searchText: ""

};

this.updateSearch = this.updateSearch.bind(this);

}

updateSearch(newText) {

this.setState({ searchText: newText });

}

render() {

return (

<p>You searched for: {this.state.searchText}</p>

</div>

);

}

export default App;

Here’s the new, functional App.js:

import React, { useState } from "react";

import SearchBar from "./SearchBar";

const app = props => {
  const [searchedText, setSearchedText] = useState("");

  function updateSearch(newText) {
    setSearchedText(newText);
  }

  return (
    <div className="App">
      <SearchBar onSearchSubmit={updateSearch} />
      <p>You searched for: {searchedText}</p>
    </div>
  );
};

export default app;

import React, { useState } from "react";

import SearchBar from "./SearchBar";

const app = props => {

const [searchedText, setSearchedText] = useState("");

function updateSearch(newText) {

setSearchedText(newText);

}

return (

<p>You searched for: {searchedText}</p>

</div>

);

};

export default app;

The first thing to notice is that App.js using Hooks is far less verbose than the original. My experience thus far has shown that this is pretty typical in these React hook conversions. Indeed, if you count the LOC, you’ll see that the whole app combined (including SearchBar) is 53 LOC with Hooks, 72 LOC without Hooks. We aren’t stuck with the usual tasks like binding functions, calling super(props), or defining the constructor in general. One can imagine how this comparison might look when using applications containing thousands of components.

The second glaring difference is this mysterious useState function imported in Line 1 and utilized in Line 6. This is the Hook! There are other featured Hooks that do different things, and you can even create your own (Hook all start with the word use, like useEffect ). This Hook has the effect of adding local state to this component. It returns the current state value, which I set to an empty string, and a function that can be used to update the state – in this case, I’m assigning the state-updater function to setSearchedText . Inside your component, setSearchedText will provide the same functionality as classic React’s this.setState .

One particular React pattern I wanted to try out with Hooks is passing state around with callbacks. Inside App.js, I want searchedText to update whenever somebody clicks the button inside the child component (SearchBar). So here I am passing updateSearch as a prop to SearchBar just as you normally would in React.

Lets move on to the child component, SearchBar:

import React, { Component } from "react";

class SearchBar extends Component {
  constructor(props) {
    super(props);
    this.state = {
      currentSearchText: "Search for something"
    };

    this.handleChangeText = this.handleChangeText.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChangeText(e) {
    this.setState({ currentSearchText: e.target.value });
  }

  handleClick() {
    this.setState({ currentSearchText: "" });
  }

  handleSubmit(e) {
    this.props.onSearchSubmit(this.state.currentSearchText);
    e.preventDefault();
  }

  render() {
    return (
      <div>
        <form onSubmit={this.handleSubmit}>
          <input
            onChange={this.handleChangeText}
            onClick={this.handleClick}
            value={this.state.currentSearchText}
          />
          <input type="submit" value="OK" />
        </form>
      </div>
    );
  }
}

export default SearchBar;

import React, { Component } from "react";

class SearchBar extends Component {

constructor(props) {

super(props);

this.state = {

currentSearchText: "Search for something"

};

this.handleChangeText = this.handleChangeText.bind(this);

this.handleSubmit = this.handleSubmit.bind(this);

}

handleChangeText(e) {

this.setState({ currentSearchText: e.target.value });

}

handleClick() {

this.setState({ currentSearchText: "" });

}

handleSubmit(e) {

this.props.onSearchSubmit(this.state.currentSearchText);

e.preventDefault();

}

render() {

return (

<div>

<input

onChange={this.handleChangeText}

onClick={this.handleClick}

value={this.state.currentSearchText}

</form>

</div>

);

}

export default SearchBar;

Here’s the new, functional SearchBar.js:

import React, { useState } from "react";

const searchBar = props => {
  const [searchText, setSearchText] = useState("Search");

  function handleSubmit(e) {
    props.onSearchSubmit(searchText);
    e.preventDefault();
  }

  function handleChangeText(e) {
    setSearchText(e.target.value);
  }

  function handleClick() {
    setSearchText("");
  }

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <input
          value={searchText}
          onChange={handleChangeText}
          onClick={handleClick}
        />
        <input type="submit" value="OK" />
      </form>
    </div>
  );
};

export default searchBar;

import React, { useState } from "react";

const searchBar = props => {

const [searchText, setSearchText] = useState("Search");

function handleSubmit(e) {

props.onSearchSubmit(searchText);

e.preventDefault();

}

function handleChangeText(e) {

setSearchText(e.target.value);

}

function handleClick() {

setSearchText("");

}

return (

<div>

<input

value={searchText}

onChange={handleChangeText}

onClick={handleClick}

</form>

</div>

);

};

export default searchBar;

There isn’t much to explain here – it just fills in the gaps from the root component above. But again, note the difference in verbosity.

Why React Hooks?

The React docs’ justification for the Hooks proposal involves alleviating some of the problems with adding reusable behaviors to existing components. With previous patterns (i.e. render props or higher-order components), there tended to be some difficulties involved. Components had to be rewritten, code began to get harder to read, etc. Straight from the React docs, “Hooks allow you to reuse stateful logic without changing your component hierarchy.”

Now I’m pretty new to React, so I haven’t developed applications that contain these messes quite yet, but creating code that is reusable is a core skill that every developer, no matter the language, needs in their toolbox (speaking of reusable React components, check out Cory House’s course on the subject on Pluralsight).

Conclusion

React Hooks seem like a very useful feature; I hope they go beyond the “proposal” status. It was pretty fun trying them out, and I encourage other developers wandering in the React ecosystem to give them a shot as well! You can add the alpha version of React and React-DOM to your playground project with npm using npm add react@16.7.0-alpha.2 and npm add react-dom@16.7.0-alpha2 (you’ll need to update both in order to try out Hook).

Thanks for reading!

Why React Hooks?

Conclusion

Leave a Reply