Fullstack React is a weekly newsletter about the React ecosystem with an emphasis on useful libraries, tutorials and code. Subscribe to read the best articles each week on React, Flux, GraphQL, Relay, and friends.

Subscribe with Email

Email

No spam, ever. We'll never share your email address and you can opt out at any time.

React v16.8 released!

The big announcement today is that React v16.8 was released this morning which includes stable support for hooks. You can now officially use hooks in your applications!

Haven't heard of hooks yet? Not to worry, the React documentation has a whole section dedicated to hooks and how to use them.

The basic idea surrounding hooks is that you no longer need to write a class to create a React component. Instead, we create our components using functions and update the components using hooks which are special, React-specific functions similar to lifecycle methods.

Dan Abramov and Sophie Alpert introduced the concept of hooks at React Conf 2018 -- you can watch their talk here

While hooks are an exciting new development in React, there's no need to go and refactor all of your applications to use them if you want to update to the latest version of React. Hooks are completely opt-in and 100% backward-compatible. So upgrade to the latest version and start building out some new components with these new features (after thoroughly reading the docs of course!)

Tutorials

If you played with React Hooks for more than a few hours, you probably ran into an intriguing problem: using setInterval just doesn’t work as you’d expect.

It's not necessarily a flaw of hooks but more of a mismatch between the React programming model and setInterval. Hooks, being closer to the React programming model than classes, make that mismatch more prominent. There is a way to get them working together very well but it’s a bit unintuitive.

In this post, Dan Abramov teaches us how to make intervals and Hooks play well together, why this solution makes sense, and which new capabilities it can give you.

How do all the new React features (context, hooks, suspense) affect how we build (web) apps in the future? Do they make state management libraries like Redux or MobX obsolete? Michel Weststrate gives an answer by first taking a step back and looking at UIs in general and then getting into the nitty-gritty details of the new React features, Redux, and MobX and how they all fit together.

Snackbars are those little notifications you see in the bottom corner of your screen to alert you that something has changed about the state of your application (data saved or updated, lost internet connection,etc). Notistack is an extention to the Material-UI Snackbar. notistack makes it easy to display snackbars (so you don't have to deal with the open/close state of them), and also enables you to stack snackbars on top of one another. It's highly customizable and you can customize snackbars the same way you do for Mui-Snackbars.

Articles

React programs usually output a tree that may change over time. It might be a DOM tree, an iOS hierarchy, a tree of PDF primitives, or even of JSON objects. However, usually we want to represent some UI with it. We’ll call it a “host tree” because it is a part of the host environment outside of React — like DOM or iOS. The host tree usually has its own imperative API. React is a layer on top of it.

So what is React useful for? Very abstractly, it helps you write a program that predictably manipulates a complex host tree in response to external events like interactions, network responses, timers, and so on.

In this blog post, Dan Abramov takes a deep dive into React as a programming runtime rather than how to use React as a UI framework. Many people successfully use React for years without thinking about how React works, they just use it -- which is totally valid. Sometimes it's good/helpful/useful though to dig a little deeper and know how something works under the hood. Check out this blog post if you want to know more about how React works!

About

Learn React the right way with Fullstack React: The Complete Guide to ReactJS and Friends. If you've already purchased a copy, you automatically get access to the latest changes. If you haven't purchased a copy yet, don't delay and get the most up to date and comprehensive information and tutorials.