Forem: Martín Granados García

Show Dev: Hacker news for books

Martín Granados García — Mon, 02 Mar 2020 14:20:37 +0000

This is the second MVP I've ever built:

I would appreciate any kind of feedback.

The idea came from disliking so much the good read pages of books that I absolutely adore. Maybe it had more to do with me being a different target than people using goodreads. That's the hypotesis behind Booktalk.

(Cover image by Ed Robertson via Unsplash)

How to build a simple login with Nextjs? (and react hooks)

Martín Granados García — Sat, 29 Feb 2020 21:09:46 +0000

This post is in no way endorsed by Zeit but a big shoutout to those guys because what they are building is amazing. As close as you can get to wizardry and superpowers (with Javascript at least).

I find the Next.JS framework to be amazingly simple and fast to learn. The documentation is great itself and they even have provided a learning site. Please do check it out.

You can review the full code in my repo:
https://github.com/mgranados/simple-login

And the final product, that uses this login with some improvements you can find it over here: Booktalk.io A page for sharing book reviews inspired heavily on Hacker News as you could notice. I will provide more intel on how to create more features and the full project on upcoming posts. Follow me if you are interested!

The setup 🛠

You need to have Node +10 installed and yarn or npm. I personally prefer yarn and will be using that through the tutorial but npm is perfectly fine as well. Commands are a bit different, that's it.

Create a Nextjs app

As per Next.js team recommendation the preferred way to do this is:

yarn create next-app

(Assuming you have Node and Yarn installed)

That will create a folder structure that will look like this:

The local development with Nextjs

That's it! You got it alright. Now to get to test the app you can run

yarn dev

And that should fire up the next dev build and expose a dev version on your http://localhost:3000/.

Let's build the API! 🏗

Now for starting crafting the API on NextJS 9.2 you can add a folder /pages/api and everything that you build there would be exposed as a serverless function when building for production in things like Now. How magical that is!?

Something quite interesting here is that you can use ES6 and things like import instead of require as you would in a NodeJS file using CommonJS

Let's build the relevant endpoints for a login:

POST /users According to REST principles this is the preferred way to created a user resource. Which can be translated to: creating a user. Which is what happens when someone signs up.
POST /auth This is a personal preference of mine for naming the endpoint that the frontend hits when the users logins.
GET /me This is also a personal preference for the endpoint that will get hit and retrieve the user data if it is logged in correctly.

Let's get to it

POST /users

The first part of the file is devoted to importing relevant libraries and creating a connection to the DB.

/pages/api/users.js

const MongoClient = require('mongodb').MongoClient;
const assert = require('assert');
const bcrypt = require('bcrypt');
const v4 = require('uuid').v4;
const jwt = require('jsonwebtoken');
const jwtSecret = 'SUPERSECRETE20220';

const saltRounds = 10;
const url = 'mongodb://localhost:27017';
const dbName = 'simple-login-db';

const client = new MongoClient(url, {
  useNewUrlParser: true,
  useUnifiedTopology: true,
});

MongoClient is obviously used for connecting to mongodb and storing the data that the api will be consuming. I like using the assert module as a simple validator for the request body and the required data on the endpoints. bcrypt is useful for hashing and verifying a password without actually storing it as plain text. (Please never do that)

The v4 function is a nice way to create random ids for the users and finally jwt is what allows to create a nice session that is secure from the frontend and verified in the backend as well.

I would strongly recommend storing the jwtSecret from a .env because it is a really bad idea storing it as part of the code commited to github or gitlab since it would be exposed publicly.

Finally you need to setup dbName and a mongo Client for connecting to the db and writing and reading from there.

Manipulating the DB (to get users and create new ones)

function findUser(db, email, callback) {
  const collection = db.collection('user');
  collection.findOne({email}, callback);
}

function createUser(db, email, password, callback) {
  const collection = db.collection('user');
  bcrypt.hash(password, saltRounds, function(err, hash) {
    // Store hash in your password DB.
    collection.insertOne(
      {
        userId: v4(),
        email,
        password: hash,
      },
      function(err, userCreated) {
        assert.equal(err, null);
        callback(userCreated);
      },
    );
  });
}

Here's a simple function to findUser by email which basically wraps the collection.findOne() function and just queries by email and passes the callback.

The createUser function is a bit more interesting because first the password needs to be hashed and the insertOne() happens with the hashed password instead of the plain text version.

The rest of the code which actually will handle the api request, the NextJS as follows:

export default (req, res) => {
  if (req.method === 'POST') {
    // signup
    try {
      assert.notEqual(null, req.body.email, 'Email required');
      assert.notEqual(null, req.body.password, 'Password required');
    } catch (bodyError) {
      res.status(403).json({error: true, message: bodyError.message});
    }

    // verify email does not exist already
    client.connect(function(err) {
      assert.equal(null, err);
      console.log('Connected to MongoDB server =>');
      const db = client.db(dbName);
      const email = req.body.email;
      const password = req.body.password;

      findUser(db, email, function(err, user) {
        if (err) {
          res.status(500).json({error: true, message: 'Error finding User'});
          return;
        }
        if (!user) {
          // proceed to Create
          createUser(db, email, password, function(creationResult) {
            if (creationResult.ops.length === 1) {
              const user = creationResult.ops[0];
              const token = jwt.sign(
                {userId: user.userId, email: user.email},
                jwtSecret,
                {
                  expiresIn: 3000, //50 minutes
                },
              );
              res.status(200).json({token});
              return;
            }
          });
        } else {
          // User exists
          res.status(403).json({error: true, message: 'Email exists'});
          return;
        }
      });
    });
  }
};

export default (req, res) => {} Here's where the magic happens and you get the req, res in a very similar way as you get in an Express app. One of the only things that are required as setup here if you intend to only process the POST requests that happen to the endpoint happens here:

if (req.method === 'POST') { }

other HTTP methods could be processed with additional conditions.

The code basically verifies that the body of the request has an email and password otherwise there's not enough info of the user to try to create.

    try {
      assert.notEqual(null, req.body.email, 'Email required');
      assert.notEqual(null, req.body.password, 'Password required');
    } catch (bodyError) {
      res.status(403).json({error: true, message: bodyError.message});
    }

After basically we verify if a user exists with that email, if it does we throw an error because then it will not make sense to create a second one! Uniqueness should be enforced at least on a field, email is perfect for this.

      findUser(db, email, function(err, user) {
        if (err) {
          res.status(500).json({error: true, message: 'Error finding User'});
          return;
        }

Finally if no user exists with that email we are safe to go ahead and create it.

   createUser(db, email, password, function(creationResult) {
            if (creationResult.ops.length === 1) {
              const user = creationResult.ops[0];
              const token = jwt.sign(
                {userId: user.userId, email: user.email},
                jwtSecret,
                {
                  expiresIn: 3000, //50 minutes
                },
              );
              res.status(200).json({token});
              return;
            }
          });

Another relevant thing that is happening here is that the jwt sign is happening. The details of jwt can be found here But if all went alright we create a token that contains the userId and email, set it up for some time, 50 minutes in this case and send that as response.

We'll see how to handle that on the frontend.

Let's add the `/pages` 🎨

Let's build an index.js that displays some content all the time in case visitors don't have a login nor an account. And let's add the logic if the users want to sign up and login for them to see the page a bit different.

Also add the login.js and the signup.js

The /pages/signup

The most relevant part of the signup page has to be the submit function that handles the request to the api whenever the user has clicked the submit button.

  function handleSubmit(e) {
    e.preventDefault();
    fetch('/api/users', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        email,
        password,
      }),
    })
      .then((r) => r.json())
      .then((data) => {
        if (data && data.error) {
          setSignupError(data.message);
        }
        if (data && data.token) {
          //set cookie
          cookie.set('token', data.token, {expires: 2});
          Router.push('/');
        }
      });
  }

e.preventDefault() stops the submission from following the standard procedure and basically redirecting the page.

Then the call to the api happens with the fetch('/api/users') call. We send the body as a JSON and here it is important to notice that those values are obtained from hooks set onChange of the inputs.

The most interesting part of this is

        if (data && data.error) {
          setSignupError(data.message);
        }
        if (data && data.token) {
          //set cookie
          cookie.set('token', data.token, {expires: 2});
          Router.push('/');
        }

Using the import cookie from 'js-cookie' library we set the cookie from the token obtained and set it's expiration for days. This is a discrepancy maybe it is better to set it to 1 day and the JWT for a bit less than that.

Having the cookie set, whenever we make additional requests that cookie is sent to the server as well and there we can decrypt and review if the user is authed properly and that auth is valid.

POST /auth

This endpoint is very similar to the signup endpoint the main difference and the most interesting part is the Auth method which basically compares the plain text password entered in the body and returns if it matches with the hash stored in the users collection.


function authUser(db, email, password, hash, callback) {
  const collection = db.collection('user');
  bcrypt.compare(password, hash, callback);
}

Instead of creating the user we just verify if the info entered matches an existing user and return the same jwt token

  if (match) {
              const token = jwt.sign(
                {userId: user.userId, email: user.email},
                jwtSecret,
                {
                  expiresIn: 3000, //50 minutes
                },
              );
              res.status(200).json({token});
              return;
     }

The /pages/login

The login page is basically the same form as the signup.js with different texts. Here I would talk a bit more about the hooks used.

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

//...

return (
<input
        name="email"
        type="email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
      />

)
}

Here you can see the basic usage of a react hook. You can store the variable state that you define at the top of your component and set it with the companion function.

Whenever someone changes the email onChange={(e) => setEmail(e.target.value)} kicks and sets the value and makes it available through all the component.

More info on hooks

POST /me

const jwt = require('jsonwebtoken');
const jwtSecret = 'SUPERSECRETE20220';

export default (req, res) => {
  if (req.method === 'GET') {
    if (!('token' in req.cookies)) {
      res.status(401).json({message: 'Unable to auth'});
      return;
    }
    let decoded;
    const token = req.cookies.token;
    if (token) {
      try {
        decoded = jwt.verify(token, jwtSecret);
      } catch (e) {
        console.error(e);
      }
    }

    if (decoded) {
      res.json(decoded);
      return;
    } else {
      res.status(401).json({message: 'Unable to auth'});
    }
  }
};

This endpoint is pretty straightforward yet it is very powerful. Whenever someone makes a api/me call the server will look for a token key in the req.cookies (that is magically managed by Nextjs middleware) if said token exists and passes the jwt.verify it means the user is validly authed and returns the info decoded (userId and email, remember?) and tells the frontend to keep on, otherwise it returns a 401 Unauthorized.

The /pages/index

Now let's protect a part of the index page to change when you are authed. So it has some difference and you can see the full power of the cookies and the api/me endpoint.

What happens for checking the auth:

  const {data, revalidate} = useSWR('/api/me', async function(args) {
    const res = await fetch(args);
    return res.json();
  });
  if (!data) return <h1>Loading...</h1>;
  let loggedIn = false;
  if (data.email) {
    loggedIn = true;
  }

We make a call to the api/me endpoint (using the nice lib useSWR, also by zeit team) and if that responds with data.email we make the variable loggedIn equal to true and in the render we can display the email of the user that is logged in and a Log Out button actually! (That simply removes the token from the cookies, is that easy!)

      {loggedIn && (
        <>
          <p>Welcome {data.email}!</p>
          <button
            onClick={() => {
              cookie.remove('token');
              revalidate();
            }}>
            Logout
          </button>
        </>
      )}
      {!loggedIn && (
        <>
          <Link href="/login">Login</Link>
          <p>or</p>
          <Link href="/signup">Sign Up</Link>
        </>
      )}

Full code for the page component:

import Head from 'next/head';
import fetch from 'isomorphic-unfetch';
import useSWR from 'swr';
import Link from 'next/link';
import cookie from 'js-cookie';

function Home() {
  const {data, revalidate} = useSWR('/api/me', async function(args) {
    const res = await fetch(args);
    return res.json();
  });
  if (!data) return <h1>Loading...</h1>;
  let loggedIn = false;
  if (data.email) {
    loggedIn = true;
  }
  return (
    <div>
      <Head>
        <title>Welcome to landing page</title>
        <meta name="viewport" content="initial-scale=1.0, width=device-width" />
      </Head>
      <h1>Simplest login</h1>

      <h2>Proudly using Next.js, Mongodb and deployed with Now</h2>
      {loggedIn && (
        <>
          <p>Welcome {data.email}!</p>
          <button
            onClick={() => {
              cookie.remove('token');
              revalidate();
            }}>
            Logout
          </button>
        </>
      )}
      {!loggedIn && (
        <>
          <Link href="/login">Login</Link>
          <p>or</p>
          <Link href="/signup">Sign Up</Link>
        </>
      )}
    </div>
  );
}

export default Home;

Remember the whole code is available here:
https://github.com/mgranados/simple-login for your review!

That's it! Thanks getting this far! Hope you got a good hold of what it is like to build an api and pages with Next.JS and I hope you are motivated to build your own stuff.

If you liked or have doubts and I could help you with something JS related please ping me on Twitter! @martingranadosg I would love to know what you can build with this! :) or ping me here in dev.to as well 😁

And I'm feeling good (on Instagram, not so much on Twitter)

Martín Granados García — Fri, 31 Jan 2020 16:09:53 +0000

January 2020

Brandon Stanton has some of the most powerful content I've ever seen on twitter. The idea of his account is to expose the emotions of people he meets in the street. Humans of New York has the most impressive stories I've ever read and the reason is that those stories are human. The stories he tells are always deep and very emotional. People with parents that treated them horribly or someone with a lot of social anxiety that speak their mind to him. He places some of their most remarkable phrases in an image, then snaps a candid of the author and post it into social media.

What makes it so powerful to me is that those persons are sharing their intimacy, or at least that's how I feel when reading about someone's parents, or the drug addiction they faced for years. How vulnerable they allow themselves to be, knowing that also a picture of them would be snapped and placed next to their stories. It's as if Humans of New York were it's own meta social media that allows people to expose themselves without a username nor a profile and in that anonymity they present some wonderful and touching stories. You could have a movie of almost all of the single stories snapped by Brandon. Of all the other accounts I follow on Twitter or Instagram why do we not allow ourselves to go that deep? How much is too much, what is the etiquette for exposing your feelings on social media. What are the emotions that are actually rewarded and to which degree are they allowed?

There are only three social networks that I use heavily thus I can speak of: Instagram, Twitter and Facebook. (Small shoutout to the new app launched by Vine's creator: Byte, it looks fun and much Vine a-like, I'm @marting there. I missed the tik-tok train, I know).

Scrolling through Facebook with all my friends and family, and let's face it: people I've met once and I am too lazy to delete, my Facebook feed has all types of posts there. I can recognize the people that like to present things that make them feel proud like winning races or some videos or pics of hobbies they might have or family related. Then there is the meme culture which always exposes something funny, almost always through sarcasm. But then there is the more troublesome part of the Facebook feed, at least for me, because I find it controversial and pointless. Political discussion and news sharing.

On political Facebook you can usually see how good of an echo chamber the feed results are. Since left wing or right wing will almost always be presented to the correct audience and get some exposure and likes and almost never become too controversial or create actual discussions on the comments. But the emotional limit to sharing something on Facebook seems to be close to watercooler talk but with extended friends and family. You just scratch the surface of what makes you comfortable, what makes you happy and what definitely upsets you. But without going way too deep into the subjects, you just scratch the surface. There is a lot to be careful about since your family will be reading about it. You don't want to expose too many emotions there.For me, it's something like having brunch with some colleagues, some friends, and a couple cousins and aunts. But also the brunch is being video recorded and you know your parents will watch it later so you have to be careful there too.

Political Twitter is something for the books, movies should be made of it. That is a harsh place to be. But once again the political agenda and sports are top discussions here in Mexico and I find it fascinating to explore, sometimes. Since Twitter does not offer the same kind of echo chamber protection that Facebook does, you can certainly find always some really harsh discussion on the top or most popular posts of a search or a trending topic. Almost all the time the responses are emotional (hate being the most relevant emotion) and not very deliberately.

Regular day-to-day twitter is surprisingly good. Definitely the one I enjoy the most, to be honest. Yet whenever something truly magnificent happens all Twitter will join regarding that matter. Today was a sad day because Kobe Bryant, a magnificent basketball player died. And almost all hashtags were made in his honor of people mourning with reasons for the tragic death of his. But whenever there is not an existing agenda, you get to curate whatever you were going to follow and your stream of tweets will be highly focused on your interests. That allows to focus while blocking the other part of the world, which is impossible huge.

On Instagram I think it is pretty clear that whatever the original intention for the social network was on the beginning nowadays the whole purpose of it seems like it is to show off. Sharing something on Instagram that it's not lifestyle related seems like a waste of exposure. I think the stories paradigm allows some more mundane concepts to be shared and maybe exposed and regarded. But they do dissappear as quickly as they were snapped. I can't even recall most of the concepts I see there. Mostly those are always places and food though. Since most of the people in their twenties and thirties are hooked here (in Mexico) seems like the default for the social media experience for adults. Nice adventures, some good food, but not much thought or ideas shared there to be honest.

A small niche social media I found and enjoy a lot: Youtube comments. Youtube comments vary way too much on whatever the video you are watching is about. But I found it to be pretty interesting what is going on there. Videos on jazz albums tend to be amazingly good and wholesome. People there tend to be open and share more related music. People on trending tech product videos tend to have some pretty childish humour like myself, and I can relate so well. This tends to be something that presents like-minded people together but for a brief moment only since the videos can only last so much more than 10 minutes maybe. And there is no way to extended the conversation truly or make something out of this since personal Youtube profile contain the bare minimum info to exist. Unless you are trying to create a channel you won't be adding much to your profile. Maybe the comments and opinions on videos could be of value there.

It has been resonating very much lately that the future of social media are small groups on any messaging platform. I can recall Path from the 2010's as a solid effort onto these but the urge for less noise was still not there. I have not been aware of any other great effort to the create the paradigm of small tribes in apps of any sort. Maybe that's the correct way of thinking of it. Something out of localism, something that resembles tribes. Recently we had the Threads app by Instagram that was basically Instagram functionality but only for the "Close Friends" part of your followers. But we need something that empowers beyond whatsapp ability to connect with neighbors and local business. Whenever something social is about to happen in my life it always come in the form of a whatsapp group as well. In China there is WeChat but if America is going to work like I think they do. We will prefer something decentralized. Something specific for the job. Not sure what could suffice but it could be in the form of video calls and audios, maybe audios will do it. A group to dump voice messages or create videocalls with locals near you or the group of friends of your choice, always joined by a certain topic that unite you.

Social media and having a phone all the time with you allows for a new kind of interconnected world that was nowhere to be ever seen before. If something weird is happening in your neighborhood one of the first insticts will be to pull out the phone and start recording with your camera. Then it can get shared in seconds. Whenever we find something cool, we can share it instantly with our beloved or our different tribes online. If we find something displeasant or sad worthy of sharing the feeling as well. But where to share it seems to carry a complex train of thought in current society. Depending on how intimate what you want to share will be you will decide where to post it. If something is super intimate it's almost certain that it will be shared on a messaging platform instead of the bigger networks. Maybe networks need to shrink in order for to us to share with confidence with our true "close friends".

Thanks to Arturo Castillo and Alejandro Zepeda for reading drafts of this.

(originally published at my blog: https://martingranadosg.com/feeling)

Build habits, or habits will build themselves.

Martín Granados García — Sat, 10 Aug 2019 21:41:07 +0000

Habits will form whether you want them or not, tweeted author James Clear, author of the best selling book on habit, Atomic Habits. Habits will be a part of the shape of your day to day whether you decide to work on them or not. So why not make the best of every single day at least picking the ones you can control or default to. I just started tracking monthly goals on a daily basis, something Paul Graham and even Sam Altman recommended. The hardest thing for me was delaying the rewards of my actions. Some days you have those amazing wins or something just clicks and you feel an amazing fulfillment that you are taking steps forward. The big problem is when there are just OK days, the days where you accomplish a bit and nothing very special, you’re tired and need to sleep. That’s when you need to acknowledge the small steps forward and avoid being down.

It is specially hard since we are now so addicted to small wins and always having likes or loving stuff. Social media, immediateness of information and gamification of all the digital products allows us to always be winning and feeling good. Even if there is nothing that truly should trigger happiness. The problem is not the over exposure to winning but the habit of always being liked or have external validation on the smallest things we are doing. Starting things that will provide internal value in the mid to long-term is hard because we don’t have a proper way of validating whether we’re doing those things right. But that’s the beauty of it. With these type of habits you develop patience for wins that are worth a lot more. Sometimes delaying the gratification is worth it. It may make you feel dull at the beginning but overcoming that allow us to grow and create better things, reach more impressive goals, the things that matter the most in life.

For some reason is not easy to be patient with oneself. At least with other people in some cases you can find yourself justifying their behaviors or conducts. But when it comes to self-judging people tend to be harsher or maybe the harshest they can be. Not a big thing but definitely something we should work on since life is basically a single player game and we are on this for as long as we are able to exist. No respawns.

The thing that I found easier with habits is just deciding what I’d like to accomplish, it’s just like going shopping you choose a couple nice things and be done with it. The hardest part is showing up for the task. Every day. No excuses, even if for some reason you truly are out of possibilities to show up you can always just barely accomplish something by working as minimum as 15 minutes. Or so said a piano teacher in youtube.

Twitter is like ice cream. You might want it every day, but you know it’s not healthy to abuse it and have it for every meal. Your belly is going to hate you for it! Same happens with all social media. Every now and then you can use the stream of great news and curated content you established from Instagram, Twitter and Facebook. But you need to let it go and move on.

The more important thing with habits is that they allow you to improve a little bit everyday and create compound interest or wins that create the bigger wins in life. You need small boring wins during the days to become a master. Maybe that’s why Paul Graham talked about letting yourself be pulled by delight. Being pulled by delight allows you to just plainly enjoy whatever activity you’re involved thus you won’t need such a big win or outcome from the activity just to be doing it.

What I’ve done so far to try to keep up with building the habits I want: A simple file where I just keep track of a list of the habits I want to build on a daily basis, assign one single character to each one and just write what I accomplished during the day by writing the chars of the habits I actually managed to deliver. I feel now way guiltier to not accomplish anything at all when opening the file and a good day now looks like:

August 09: Swrym

And the whole august.md so far looks like this:

    # Daily reports of habits in August

    Symbols:
    Study
    write
    read
    yoga
    meditation
    (ru)n

    Started on August 4
    04:Swrymru
    05:Swym
    06:
    07:Swym
    08:wrym
    09:wr

It is my own equivalent of what Jerry Seinfeld recommend to keep track of doing things you needed to do: literally just cross a day in the calendar, once you have a big chain you will feel guilty to miss a single day. Remember, habits will form, whether you like it or not. Build them to support you on the long run.

You can quickly visualize how your days have been and even get an idea of what you could be doing today or tomorrow to keep on track. As you can tell from the example I have been writing a lot but my running has been missing. Now I can go on and fix that today.

(originally post at my personal blog)

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

Martín Granados García — Fri, 21 Jun 2019 18:12:04 +0000

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.