React TL;DR #3 – Top React Content of September 2019
What is React TL;DR?
How do you decide which React news can be useful to you? Or how something matches your interest or bring any value?
Content tools are easy to fool and collect a lot of crap that doesn’t really help or improve your work and this is why we decided to select the most useful React news ourselves.
Our TL;DR version delivers the essence from the article and helps you decide if it’s worth reading further to you.
Again – we don’t use any engines or tools. It is all selected by ourselves, based on what we have learned and gained profit from. No b#$%it provided.
Say hello to React TL;DR – a human filter for most useful React content.
React TL;DR – useful articles from September 2019
Announcing React Native 0.61 with Fast Refresh
- fully supports modern React, including function components and Hooks.
- recovers after typos and other mistakes, and falls back to a full reload when needed.
- doesn’t perform invasive code transformations so it’s reliable enough to be on by default.
Other Improvements and changes:
- Fixed use_frameworks! CocoaPods support.
- Add useWindowDimensions Hook – This new Hook automatically provides and subscribes to dimension updates, and can be used instead of the Dimensions API in most cases.
- Remove React .xcodeproj.
A Guide to Component Driven Development (CDD)
Key benefits of using CDD:
- Faster development: Separating development into components lets you build modular parts with narrowly-focused APIs.
- Simpler maintenance: When you need to modify or update a part of your application, you can extend or update the component instead of having to refactor larger parts of your application.
- Better reusability: Through the separation of concerns components can be reused and extended to build multiple application instead of having to rewrite them over and over again.
- Better TDD: When building modular components it becomes much easier to implement unit-tests to validate the focused functionality of each component.
- Shorter learning curves: When a developer has to dive into a new project, it’s much easier to learn and understand the structure of a defined component than dive into an entire application.
- Better modeling of the system: When a system is composed out of modular components, it’s easier to grasp, understand and operate on.
- Declarative: Never again communicate with your data store using an imperative API.
- Colocation: Queries live next to the views that rely on them, so you can easily reason about your app.
- Mutations: Relay lets you mutate data on the client and server using GraphQL mutations, and offers automatic data consistency, optimistic updates, and error handling.
Improving Performance in React Functional Components using React.memo()
- Read React Hooks documentation and FAQ before you start.
- Install, use, and follow the ESLint plugin.
- Don’t think about Lifecycles, think about synchronizing side effects to state.
- Know that React is fast by default and do some digging before applying performance optimizations pre-maturely.
- Avoid testing implementation details.
Thinking With Portals
- Portals allow us to insert a child anywhere in the DOM tree and visually “escape” a parent container (eg. modals, tooltips, popups)
- A component rendered using portals behaves like a normal React child because it still exists within the React tree