Beginner's Thread / Easy Questions (February 2021)

• Immer

  141 26,898 7.2 JavaScript

  Create the next immutable state by mutating the current one

  

I'm writing an editor for data that look like this: Template > Sections > Fields. Currently, all data is a single nested array (useReducer). This makes it very easy to import and export, move sections and fields around, but immutibility update patterns are a hustle and performance feels bad (with many fields, changing a field name takes ~1s to render in dev mode). I will try immer.js now and add throttle to inputs changes. I'm just wondering if it's possible to store everything on component level (state), but I just don't see how I could export the whole dynamic structure as json then.

• immutable-js

  38 32,853 7.0 TypeScript

  Immutable persistent data collections for Javascript which increase efficiency and simplicity.

  

If you need to improve performance, immutable-js may help (or any library supporting persistent immutable data structures). "Persistent" here doesn't refer to "persisting across sessions", it's not like cookies/localstorage - it refers to "when you create a new version of the data structure, the old still exists, and they can share data". This can allow "point" updates in very wide structures to be fast, where they'll be slow in the manual "immutability update patterns" on things like arrays with 1,000,000 items, since the entire array must be copied. A persistent map will instead only require performing about 20 or so copies of small parts of an internal tree.

• 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.

  

• Material UI

  290 91,511 10.0 TypeScript

  Ready-to-use foundational React components, free forever. It includes Material UI, which implements Google's Material Design.

  

There doesn't seem to be an "option" to make labels into multiline (https://github.com/mui-org/material-ui/issues/3623) unless you want to customize component props (https://material-ui.com/api/button/#props).

• Playwright

  377 61,381 9.9 TypeScript

  Playwright is a framework for Web Testing and Automation. It allows testing Chromium, Firefox and WebKit with a single API.

  

I ain't no authority in this and You can test your code with RTL (React Testing Library) and user simulations (e2d) with either Cypress (or PlayWright)

Suggest a related project