So, this article has two purposes. The first purpose is for me to vent a little bit about my experience working with ReactJS. At the end of the day, the purpose is to hear back from the community and learn a thing or two about how to solve the problems I ran into and what I could have done better.

I recently started an open-source project based on GitHub's Markdown profile feature. The goal is to make it easy to include awesome features for your own GitHub profile. I started off with a NextJS project which I would export with GitHub Actions and then publish through Github Pages. During development, I ran into some hardship using the ReactJS framework feature. Let's have a look at the issues.

Interfaces

I've been working with object-oriented programming for a while so it's hard for me to let go of the habits I picked up there. However, to find out that Javascript doesn't do easily do interfaces was a terrible shock to me. I mean how can you adhere to SOLID principles if your language doesn't even feature interfaces?

The use case I had here was that I wanted to make it easy for other contributors to extend the markdown template website with new templates. I was going to create an interface that could be implemented and would contain all the methods that I use on the main page to render and update the templates. I ended up creating a template class which would simply chuck errors for methods that weren't implemented. A bit like such:

import React from 'react'
import {error} from "next/dist/build/output/log";

export class Template extends React.Component {
    render() {
        throw error("The render method is used to render the Template's form. Please implement a form!")
    }
}

export default Template

Methods, methods everywhere!

Why is it that everything seems to be migrating functions? What have classes ever done wrong to you? I mean how are you supposed to easily keep track of objects that were returned from an API. Aren't you supposed to have high cohesion in your code? I'd love to have my data objects all within my classes. I'll be eternally (or at least a while) indebted to someone who (links me an article that) thoroughly explains to me why functional components are better.

Tracking global states

So I've got a system where users need to log in. Once they're logged in I want to be able to access the current user throughout my entire web app. I couldn't for the life of me figure out how to create something like a singleton in my application to track one sole instance of that user object. I found some documentation but it was mostly "we don't advice you do this". Admittedly a singleton is somewhat of an anti-pattern but that doesn't mean it suddenly completely ceased to be useful. How would I go about solving the above use case?

Ok, it's also been great

I can keep on ranting for a while but these three things have so far been my biggest pain points. The experience has also been great compared to the old school jQuery way of doing things. Javascript has come a long way and I hope it will keep doing great things in the future. But it also bugs beyond belief. Now's your chance to bash me and prove me wrong!😊