Best practice for handling parent state of unknown amount of similar child components

This page summarizes the projects mentioned and recommended in the original post on /r/reactjs

Our great sponsors
  • Appwrite - The Open Source Firebase alternative introduces iOS support
  • Klotho - AWS Cloud-aware infrastructure-from-code toolbox [NEW]
  • InfluxDB - Access the most powerful time series database as a service
  • Sonar - Write Clean JavaScript Code. Always.
  • agile

    🌌 Global State and Logic Library for JavaScript/Typescript applications

    In case you are open for a new State Manager.. AgileTs provides a simple class called 'Collection' which helps us to keep track of a reactive Objects Array.

  • todomvc

    Helping you select an MV* framework - Todo apps for React.js, Ember.js, Angular, and many more

    If you look at the todomvc example for vanilla react, the way they're handling this shared state between parent component and children is through an external "TodoModel" which re-renders the whole component tree on every change. Granted it's a bit outdated, but it's the closest public showcase solution I could find (TodoMVC is to compare how different frameworks aproach the exact same problem)

  • Appwrite

    Appwrite - The Open Source Firebase alternative introduces iOS support . Appwrite is an open source backend server that helps you build native iOS applications much faster with realtime APIs for authentication, databases, files storage, cloud functions and much more!

  • jotai

    👻 Primitive and flexible state management for React

    However if you don't care for testing (which you should) or Storybook, then you might find something like Jotai (Recoil alternative) to help you, where you'd have an atom for the ingredient list and then derived atoms for each ingredient, but I'll be honest and say I don't have much experience with the library. I just think something like Redux would way overcomplicate it compared to sticking with React's state model. I'd rather use something like Constate then that's a small helper to make contexts with hooks.

NOTE: The number of mentions on this list indicates mentions on common posts plus user suggested alternatives. Hence, a higher number means a more popular project.

Suggest a related project

Related posts