React Best Practices — Avoiding Anti-Patterns

Photo by Tj Holowaychuk on Unsplash

Like any kind of apps, React apps also have to be written well. Otherwise, we run into all kinds of issues later on.

We will look at React anti-patterns to avoid

Don’t Use the Return Value of ReactDOM.render

Even though ReactDOM.render returns a reference to the React component instance that’s rendered, we should avoid using it since it’s a legacy feature.

Future versions may render asynchronously, so we shouldn’t rely on its return value.

Instead of writing:

const inst = ReactDOM.render(<App />, document.body);
doSomething(inst);

We write:

ReactDOM.render(<App ref={doSomething} />, document.body);

Minimize the use of setState

setState shouldn't be used too much. This way, we get pure components that don’t have too many side effects or internal states. Internal states can be hard to track and test.

Don’t Use String References

We shouldn’t use string references. This is because it’s been superseded by objects refs.

So instead of writing:

const Hello = createReactClass({
  render: function() {
    return <div ref="hello">Hello, world.</div>;
  }
});

We should write:

function Foo {
  const ref = useRef();
  useEffect({} => {
    ref.current.scrollIntoView()
  }, []);
  return <div ref={ref} />
}

The ref’s current property has the DOM object.

Don’t use this in Stateless Function Components

One of the great benefits of stateless function components is that we don’t have to deal with this.

So we shouldn’t use it.

They should only access props and render them/

Therefore instead of writing:

function Foo(props) {
  return (
    <div>{this.props.bar}</div>
  );
}

We write:

function Foo(props) {
  return (…