Things I learned from using Remix

I've been a React user since 2017. I've used Gatsby and NextJS. It's about time I try Remix. I finally had a chance when I submitted a project for the Linode hackathon: Moon Stats Project

Things I liked

  • You don't need to use react query or swr to handle server side changes. Remember when you need to update your data after you submitted a form? Remix does it for you by using the combination of action, loader and Form

I'm using ValidatedForm from remix-validated-form in this instance, but you can use a normal html form if you wish.

<ValidatedForm validator={validator} method="post">
  ... your input fields here
 <button type="submit">Submit</button>
</ValidatedForm>

When you submit that form it goes to the action function, which looks something like:

export const action: ActionFunction = async ({ request }) => {
  const formData = await request.formData()
  const values = Object.fromEntries(formData)

  const fetched = await fetch(url-here, {
    method: 'POST',
    headers: {
      Accept: 'application/json',
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
      ... fields
    }),
  })

  const res = await fetched?.json()

  return { res }
}

Now wherever in the site that you're using a loader function that has been updated by your action, will automatically update without any useEffect or any listener function!

  • Another cool thing is the ease of using cookie session with their API. It's secure and dev-friendly. It's well-documented here Remix Sessions. This makes user auth config process in front-end a breeze.

There's so many other cool things that I haven't tapped on. Feel free to ask me any questions about Remix or how to set it up, and I'll be glad to answer :)

Cheers, FM