Built my first chat-app with React Hooks exclusively. It was great.

#react #hooks #webdev #javascript

React Hooks are simple. Whatever adjectives may come to mind about your favorite application state management tool (redux, mobx) surely would not include simple.

I have worked with a couple implementations of those AppState Tools: A couple years ago built a whole site with Redux sagas. The learning curve was awfully complicated for someone that came from a backend setup. Once you had the notion on how to implement the Sagas, Actions, Reducers and Stores, you could easily make a call to an API via impure actions and refresh the UI. Then I went on to try branches with Baobab for a while. Saw an improvement there on the ease of use. My next project was fairly simply so I was fortunate enough to be able to avoid any state management at all. It was fun and it was a bit of fresh air in the frontend wilderness.

A couple months ago I decided to start a sideproject. React Hooks was new cool tech to try and I was totally in after reading their motivation post and what it promised to deliver. It delivered. It is amazing the ease now to get data from an endpoint and place it on the UI.

import React, {useState} from 'react';

const Login = () => {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [loading, setLoading] = useState(false);
  const [loginError, setLoginError] = useState('');

  let errorLabel;
  if (loginError) {
    errorLabel = <Help isColor="white">{loginError} </Help>;
  }
}

This snippet is enough to store email and password from a form, send it to an endpoint and place errors if they arise. I was astonished with the simplicity of it. I loved it.

As some parts of my code became intrinsically more complicated, Hooks held stoically for me. useEffect() extend an additional amazing API for Hooks, you can condition calls, provide additional variables that may be required for logic on your calls and finally setValues to your simple state. Example provided:


  const [newMessage, setNewMessage] = useState('');
  const [post, setPost] = useState(false);
  useEffect(() => {
    async function postMessage() {
      const response = await postNewMessage(
        newMessage,
        props.match.params.id,
        userSession.token,
      );
      if (response.status === 200) {
        setReloadPage(true);
      } else if (response.status === 422) {
        setErrorJoining('Please write something');
      }
    }
    if (post) {
      postMessage();
    }
    setNewMessage('');
    setPost(false);
  }, [post, props.match.params.id, userSession.token]);

Code remains awesomely legible and with the variables you provide on the second argument you grant that any change on them will trigger the hook again. With useEffect() I nearly forgot the existence of the components lifecycle with minimum tradeoffs.

The web-app is not a complex one but the ride has been amazing so far. (You can test it here: https://beta.nicetalks.co/)
I am deeply thankful to the React team for releasing Hooks. They allowed to create a web-app fairly simple and straightforward again. I cannot recommend them enough for any project you may want to start now.

Top comments (4)

Gerret Halberstadt • Jun 21 '19

Hooks are awesome, but as a side note, they are not a replacement for redux or mobx. useState simplifies your local state management and useEffect replaces your lifecycle methods.