DEV Community

Cover image for The BEST REACT Concept (NO CLASS NEEDED)
Grégory D'Angelo for AlterClass

Posted on • Updated on • Originally published at alterclass.io

The BEST REACT Concept (NO CLASS NEEDED)

React.Component

If you have worked with React, you should already know that components are the building blocks of a React application. Since the React v0.13.0 release, components allow us to split the UI into reusable and independent pieces using ES6 classes.

"I already know that. React is awesome!"

import React from 'react';
import AnotherCompoment from './components/AnotherComponent';

// A React class component
export default class MyComponent extends React.Component {
  contructor(props) {
    super(props);
    this.state = {
      ...
    };
  }

  render() {
    <div>
      ...
      <AnotherComponent />
      ...
    </div>
  }
};
Enter fullscreen mode Exit fullscreen mode

Function Component

Okay! Later with the React v0.14.0 release, the React team has introduced another way to create components, named function components. Using an ES6 arrow (or a simple) function, we could now create a stateless React component.

"I told you. React is awesome! I use function components a lot."

Those function components have no state, no lifecycle methods, but they are easy to write. The amount of code you need to write is quite small compared to a class component.

import React from 'react';

export default const MyComponent = ({ name = "" }) => {
   return <div>Hello {name}!</div>
};
Enter fullscreen mode Exit fullscreen mode

This is a great fit for components that just need to render some UI.

However, if our component needs a state or has to use a React lifecycle method, we had to use a class. That sucks, right? What if we want to benefit from the React state and lifecycle concepts, without having to use a class 🧐? Anyone?

"Uh... Let me think about it..."

promo.png

React Hooks

Again, the React team came to the rescue with the React v16.8 release. They have introduced the BEST concept to the React library so far: React Hooks 🔥🚀!

"But wait... what is it?"

What? You haven't heard about React hooks yet? That's okay, let's dive into it together.

In a nutshell, React hooks are functions that allow us to use state and other React features inside our function components. No class needed! Isn't that wonderful?

"A function? This is what you call the BEST React concept?"

Think about it. You can now write simple and readable function components and still use React concepts. No more class creation. No more constructor. No more binding. No more duplicate logic. No more hassle when sharing non-visual logic between components. No more...

"Wait. Wait. That's too much for me. I need some examples."

I got it. Let's imagine we'd like to build a login form so that our users can authenticate into our app by using their email and password. Let see how to build the login form UI only using a function component and React hooks.

For simplicity, we won't dive into the authentication logic which is a completely different topic.

Login Form with React Hooks

Alright. First, we need to create our function component. Easy, right?

import React from 'react';

export default const LoginForm = (props) => {
  return (
    <div>
      <h1>Login Form</h1>
    </div>
  );
}
Enter fullscreen mode Exit fullscreen mode

Now, let's create the form itself by writing some JSX for the input fields and the submit button.

<form>
  <label>
    Email Address:
    <input type="text" />
  </label>
  <label>
    Password:
    <input type="password" />
  </label>
  <input type="submit" value="Submit" />
</form>
Enter fullscreen mode Exit fullscreen mode

In order to handle the submission of the form and to have access to the data that the user enters into it, we must convert our form component to a controlled component. That's something we are used to with class components and the React state. However, since we’re no longer using a class, we need a new way to add and manage the state inside our function component.

"You talked about React hooks. I believe there is a hook for that, right?"

State Hook - useState

Exactly, as of React v16.8.0, React gives us the ability to manage state inside function components via the useState method.

import React, { useState } from 'react';
Enter fullscreen mode Exit fullscreen mode

The useState method, like any other React hooks, must be used inside a function component. useState takes in a single argument, the initial value for the state. It returns an array with the first item being the stateful value and the second item being a function to update that state.

In our case, we need 2 state values for handling user inputs. One for the email address, and one for the password. Let's initiate those ones with an empty string.

const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
Enter fullscreen mode Exit fullscreen mode

We'll use the states and the update functions to control the form inputs.

...
<input
  type="text" 
  value={email}
  onChange={(e) => setEmail(e.target.value)} 
/>
...
<input
  type="password" 
  value={password}
  onChange={(e) => setPassword(e.target.value)} 
/>
...
Enter fullscreen mode Exit fullscreen mode

The setEmail and the setPassword functions are used to update each corresponding state. They accept a new state value and enqueues a re-render of the component.

"Waw! That's amazing."

We now have a controlled component built with a simple function and the React useState hook. We can finally create a function to handle the form submission as usual.

import React, { useState } from 'react';

export default const LoginForm = (props) => {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");

  const handleSubmit = (e) => {
    e.preventDefault();
    // Authenticate user
    ...
  };

  return (
    <div>
      <h1>Login Form</h1>
      <form onSubmit={handleSubmit}>
      ...
      </form>
    </div>
  );
}
Enter fullscreen mode Exit fullscreen mode

"One more thing. How do I put the focus on the email input? I don't have access to the componentDidMount method anymore, do I?"

Effect Hook - useEffect

Good question. We do not have access to the componentDidMount, componentDidUpdate, and componentWillUnmount methods inside our function components. But, we now have the Effect hook, useEffect. This hook allows us to perform "side effects" from a function component.

import React, { useEffect } from 'react';
Enter fullscreen mode Exit fullscreen mode

In other words, this is where we'll handle things like data fetching, setting up subscriptions, or manual DOM manipulation. The useEffect accepts a function that will be run by React after every render.

useEffect(() => {
  ...
})
Enter fullscreen mode Exit fullscreen mode

Let's come back to our example. Thanks to the useEffect hook we can set the focus to our email input field when our component renders. For doing that, we also need a way to access the DOM node. And guess what? React has a hook to do that, useRef.

import React, { useRef } from 'react';
Enter fullscreen mode Exit fullscreen mode

"Wait! I thought we already have a way to access DOM nodes with React.createRef(). What's the difference with the useRef hook?"

Ref Hook - useRef

You are right. To access a DOM node in a class component, we would use the React.createRef method. However, this method always creates a new ref on every render. To overcome that, we would typically put the ref in an instance property inside the class constructor. But we do not have this option in a function component.

That's why we need to use the useRef hook in a function component. Indeed, useRef will return the same ref each time for the full lifetime of the component.

"Okay. I got it. Can you please show me how to use it?"

export default const LoginForm = (props) => {
  ...
  const emailEl = useRef(null);
  ...

  return (
    ...
    <input 
      ref={emailEl}
      type="text" 
      value={email}
      onChange={(e) => setEmail(e.target.value)} 
    />
    ...
  );
Enter fullscreen mode Exit fullscreen mode

Now that we have access to the DOM node of our email input, let's put the focus on it using the Effect hook.

useEffect(() => {
  emailEl.current.focus();
});
Enter fullscreen mode Exit fullscreen mode

Skipping Effects

I told you before that React will run our effect function after every render by default. This is the case with our current implementation. So, every time the user will enter a value in one of the input fields, the state will be updated, and the component will be rendered. Then, our effect function will be run and the focus will be put on the email input again. That's not what we want.

Fortunately, we can customize this behavior by passing a second argument to the useEffect hook, a dependencies array. In our case, we can pass an empty array to tell React that it never needs to re-run our effect function.

useEffect(() => {
  emailEl.current.focus();
}, []);
Enter fullscreen mode Exit fullscreen mode

That's it folks! We have a login form built with a functional component and React hooks only. Here's the full source code in case you need it:

import React, { useState, useEffect, useRef } from 'react';

export default const LoginForm = (props) => {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");

  const emailEl = useRef(null);

  const handleSubmit = (e) => {
    e.preventDefault();
    // Authenticate user
    ...
  };

  useEffect(() => {
    emailEl.current.focus();
  }, []);

  return (
    <div>
      <h1>Login Form</h1>
      <form onSubmit={handleSubmit}>
        <label>
          Email Address:
          <input 
            ref={emailEl}
            type="text" 
            value={email}
            onChange={(e) => setEmail(e.target.value)} 
          />
        </label>
        <label>
          Password:
          <input 
            type="password" 
            value={password} 
            onChange={(e) => setPassword(e.target.value)} 
          />
        </label>
        <input type="submit" value="Submit" />
      </form>
    </div>
  );
}
Enter fullscreen mode Exit fullscreen mode

promo.png

Top comments (0)