🇬🇧 React London, setState vs Redux and Bits of React
React London 2017 conference was this week and had a great line up of speakers. A couple of the speakers launched new libraries: Polished and Redux Offline. We've included the libraries in this week's newsletter of course!
Lately there's been a lot of chatter on Twitter about setState vs using an alternative state management library like Redux or MobX. Preethi Kasireddy even gave a great talk at React Conf 2017 comparing Redux to MobX. Which one is the best tool for your application: setState, Redux or MobX? The answer: it depends! I know that probably sounds frustrating, but the general consensus around when to use setState vs another state management library is that setState should be learned first before adding another library on top of React. setState is a critical piece of React that should not be ignored, especially if you are new to learning React. If and when you decide your app has gotten too unwieldy or difficult to follow just using setState to manage your state, then using another library like MobX or Redux can be a good alternative.
With all that in mind, we've got a lot of tutorials on how and when to use Redux, as well as some tips, tricks and techniques for common patterns found in React applications (including common state management techniques!).
Happy Coding!
-Sophia Shoemaker
Tutorials
Redux vs React's `setState`
When you come across a situation where you're not sure if you should use setState or Redux, Ivan Akulov has a few criteria he follows to make the decision.
Introducing Redux Offline: Offline-First Architecture for Progressive Web Applications and React Native
Today, a bit over 1 billion people have access to high-speed internet, 3 billion have some access to the web, and over 5 billion people own a mobile phone. Every single year more people will be gaining access to the internet. Most of them will be mobile users, connected via low-speed, intermittent connections. For these people, offline support is not a luxury, it is basic accessibility.
Redux Offline is a small, modular library that provides full support for offline-first applications. It’s aimed to be easy to use, work with any backend API, and can be put into use in your application in less than 30 minutes.
It aims to give a granular degree of control to all aspects of the offline-first experience. This includes how to orchestrate network-resilient API calls, how to persist your state, how to batch messages, and how to handle errors, retries, optimistic UI updates, migrations, cache pruning, and more.
medium.com
Redux 4 Ways: Implementations of Thunk vs Saga vs Observable vs Redux Promise Middleware
Thunk, Saga, Observable and Redux Promise middleware libraries offer ways to handle side effects or asynchronous actions in a Redux application. Nader Dabit created a repository for viewing and testing these implementations and walks us through a basic example of fetching and storing data in a reducer using each of these libraries.
medium.com
Watch out for undefined state
Is your React component not rendering?
Quick quiz: When a React component loads data from the server in componentWillMount what will it render? Read on to find out!
Sponsored
Try Bugsnag, and Get a Free T-Shirt 👕
Automatically detect crashes in your React Native apps using Bugsnag. Handle minified JS using sourcemaps and surface fully symbolicated stacktraces for JavaScript, iOS, and Android all in one place. For a limited time, get an ultrasoft t-shirt for trying Bugsnag when you create an account and send us an error. Learn more.
bugsnag.com
Code
React Bits: Patterns, tips, tricks and techniques
This compilation of React Patterns, techniques, tips and tricks is a really great resource and includes code samples and explanations on the following topics (plus lots more!):
- Stateless Functions
- JSX Spread Attributes
- Destructuring Arguments
- Conditional Rendering
- Children Types
- Array As Children
- Props In Initial State
- Refs over findDOMNode()
- HOC over Mixins
- Stateless UI Components
- Styles Module
- Style Functions
Redux Offline
Making offline-friendly apps is not rocket science, but to make them work well involves dealing with finicky details around persisting state, resilience against flaky networks, updating user interface state, reliably reverting it back in case of failures, synchronizing state in the background, and managing the evolution of the persistent state over long periods of time. Redux Offline is an offline-first architecture, and an experimental library that implements it.
github.com
Polished: Use CSS in JS
Want to write styles in JavaScript, but also want Sass-style helper functions and mixins? Need a consistent color palette throughout your app? ✨ polished is for you!
Polished is cross framework compatible: No matter if you're using styled-components, aphrodite, radium or plain inline styles, as long as you're writing your styles in JavaScript you can use polished! Switching from a pre-processor to styles in JS is made easier with polished.
github.com
About
Like what you've been reading from Fullstack React? You can help us spread the word. Please forward this email to you friends (and let them know they can subscribe here).
Curated with love by Sophia Shoemaker and the Fullstack.io team.
Suggestions are welcome, just reply to this email - we'd love to hear from you.