⚛️ React Hooks! And other Features & Fixes - September 3, 2020

Hey everyone! I’m excited to bring you some release notes today:

  • React Hooks are here!
  • Overhaul of Jigsaw (Draftbit UI)
  • Seeking feedback: Firebase integration
  • A known issue with cloning data-enabled apps & screens (we’re on it!)

:atom_symbol: React Hooks are here!


Draftbit now generates screen code using React Hooks! All screens will continue to work as they have, but the code generated for screens in Draftbit is now using the latest and greatest React paradigm.

The move to Hooks is great for many reasons:

  • As screens grow more complicated, their code can be difficult to manage. Hooks make complex screens easier to read and understand.
  • The move to Hooks also makes stateful logic and data management much easier to reason about and reuse, opening the door for the development of more advanced Draftbit features like form validation and authentication.
  • We’re always seeking to generate the most advanced, production-grade code possible. Hooks are the new industry standard and are what most companies are adopting when starting from scratch.

Users of Custom Code may notice that since the generated code no longer uses React classes, there are no more lifecycle methods. We’ve migrated Custom Code using React lifecycle methods to use the useEffect hook. These functions will continue to work the same way.

The React documentation has some excellent information on Hooks, and we’re happy to help with any questions you may have.

:jigsaw: Overhaul of Jigsaw (Draftbit UI)
The components in Draftbit are now more powerful than ever.

We’ve made more components data-enabled. Almost every component that accepts a string value can now accept data. This goes for many Blocks within the component library. For example, the Large Card (Rating) can now accept strings for title, left description, and right description, as well as a number (0-5) for rating and a URL for image!

We’ve also moved all Data-enabled configs to the Data tab on the properties panel. Regardless of whether you want to enter static or fetched data into your Text, Image, etc. components – you will always do this from the Data tab.

Finally, we’ve squashed a bunch of bugs with components. If a component was causing a red screen or wasn’t looking quite right on Live Preview, chances are it’s been fixed! Let us know if we missed anything :slight_smile:

:fire: Seeking feedback: Firebase integration
We would like to hear what you think in the comments of this Roadmap item: Firebase Integration (Under Review)

:beetle: Known issue: Copying/duplicating data-enabled screens & apps
If you duplicate or import a screen or app that has data flowing into it, you may experience a “blank screen” effect. This is usually because the Data isn’t traveling with the imported screen or app. To fix:

  1. Go to Data tab in your app and confirm the Service & Endpoints are still set up.
  2. If not, re-add them. Here’s a handy guide on adding Services & Endpoints.
  3. Re-add the Service & Endpoints to your Fetch component on your screens.

We are working on a better experience to fix this. Thanks to everyone who reported it!

:purse: Full list of features & fixes
As always, check out our changelog for a full rundown of everything that’s been rolled out.

6 Likes