Introducing react-use-database: client-side relational data just got easier
An issue that’s plagued React apps everywhere: after updating a resource on the server, how do I update my UI state to reflect the changes?
Typically there are two solutions:
- Use the app’s existing data-fetching mechanisms to reload the data (essentially refresh the page on the user’s behalf)
- Take the response data from the resource update and carefully update pertinent bits of state throughout the app
The first solution is easy but inefficient. It’s simple code, but it’s not particularly performant and it’s hard on the network.
The second solution is efficient but complex. It minimizes network calls, but it requires more logic and usually makes it harder to navigate the code.
Of these two implementations, I would consider the latter superior. The problem with the latter solution is that, until now, there’s been no concise, opinionated solution to facilitate relational state updates in React apps.
redux-orm had the right idea, but I found it still required a lot of boilerplate. Prior to implementing this library with hooks, I used to implement relational state management with Redux/Normalizr. It worked well, but there was too much boilerplate, and trying to onboard…
