Common Beginner Mistakes with React

• htmx

  565 32,656 9.6 JavaScript

  </> htmx - high power tools for HTML

  

Take a look at htmx (https://htmx.org/) if you haven't already. For my use cases, generally internal tooling like you mentioned, I've found it integrates extremely well with go templates and more often than not provides all the functionality that I'd generally be reaching to javascript for.

• rum

  4 1,771 3.8 HTML

  Simple, decomplected, isomorphic HTML UI library for Clojure and ClojureScript

I love React as long as it has a thin skim of clojurescript over top. Rum is the underdog compared to reagent but is still my weapon of choice - https://github.com/tonsky/rum

Was disillusioned when I had to dive into a pure js project using it.

The real benefit, I think, is that you get the well established Clojure idioms around isolating and managing mutable state.

State is stored in a Atom, which is atomically mutated, and reactive components essentially 'subscribe' to updates upon that atom to re render.

The mutations can be handled centrally by a message queue, but really, event sourcing like that is not always needed.

• SurveyJS

  surveyjs.io sponsored

  Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

  

• persistent-ts

  1 8 0.0 TypeScript

  Persistent data structures for Typescript

Try going all in on persistent data structures. I haven't tried this one but perhaps it will do the trick: https://github.com/cronokirby/persistent-ts

• Immer

  141 26,943 7.1 JavaScript

  Create the next immutable state by mutating the current one

  

Deep cloning is almost never the right answer - you'll end up copying _too many_ object references, which is extra work, and that can also lead to unnecessary re-renders depending on what your components are trying to do.

A correct immutable update is more like a "nested shallow update", copying all levels of nested keypaths leading to the actual value you want to update.

If you prefer to avoid writing those immutable operations by hand, Immer is a fantastic tool for simplifying the code by using "mutating" syntax that gets turned into a safe and correct immutable update:

- https://immerjs.github.io/immer/

- https://beta.reactjs.org/learn/updating-objects-in-state#wri...

We even use Immer by default in Redux Toolkit:

- https://redux-toolkit.js.org/usage/immer-reducers

• aberdeen

  2 1 4.2 TypeScript

  A TypeScript/JavaScript library for quickly building performant declarative user interfaces without the use of a virtual DOM.

We've had great results from our custom built non-pure reactive system (which predates React by a couple of years).

The idea is to have an Observable object that can store arbitrary trees of data (each itself an Observable). UI drawing is generally split into a function call for each DOM element that has children. These functions are executed such that they track the use of observables and will be rerun when they change.

I've more recently, after having suffered React and friends, started creating an Open Source implementation of the pattern we used. Currently, it's mostly still lacking in documentation and marketing, and that's unlikely to change if I'm honest. But this should give you an impression if you're interested:

https://github.com/vanviegen/aberdeen/blob/master/examples/t...

Curious to know your thoughts about this being an effective non-pure reactive system.

• WorkOS

  workos.com sponsored

  The modern identity platform for B2B SaaS. The APIs are flexible and easy-to-use, supporting authentication, user identity, and complex enterprise features like SSO and SCIM provisioning.

  

Suggest a related project