Avoid soul-crushing components (epicreact.dev)
Sep 08, 2020
React components afford us the opportunity to encapsulate state, logic, and markup in a single place. A component is like a magical machine where you pass in props and a beautiful component pops out the other end.
How to update state from props in React (robinwieruch.de)
May 18, 2020
It doesn't happen often, but sometimes you have to update state from props in React. In this brief walkthrough, I want to show you a use case where you would want to derive state from props and how to do it for the initial props and updated props. Keep in mind that this concept should only be used rarely though, because often there is no need to initialize state from props.
The 10 Component Commandments (dev.to)
Jun 23, 2019
This article will give you a quick introduction to some best practices within API design in general, as well as the definite list of 10 practical commandments you can use to create components that your fellow developers will love to use.
What are Controlled Components in React? (robinwieruch.de)
Apr 10, 2019
There are quite a lot of articles about React out there speaking about controlled and uncontrolled components without explaining them. It has been quite similar for my articles, whereas I always tried to add at least one or two sentences explaining them, but in the end, I thought it would be great to have a brief tutorial just showing a simple example for controlled components in React.
React List Components by Example (robinwieruch.de)
Apr 06, 2019
This tutorial for List components in React gives you a step by step walkthrough on how to render a list of simple primitives, how to render a list of complex objects, and how to update the state of your list in React.
React Function Components by Example (robinwieruch.de)
Mar 18, 2019
React Function Components – also known as React Functional Components – are the status quo of writing modern React applications. In the past, there have been various React Component Types, but with the introduction of React Hooks it’s possible to write your entire application with just functions as React components.
Writing Resilient Components (overreacted.io)
Mar 16, 2019
There are important design principles that every component should strive to follow. But I don’t think style guides capture those principles well. We’ll talk about style guides first, and then look at the principles that really are useful.
React Component Types: A complete Overview (robinwieruch.de)
Mar 12, 2019
In this guide, I want to give React beginners an historical overview of different React Components and React Patterns. The goal is to give clarity about what React Component Types developers have at their disposal, which are still used in modern React applications, and why some of them are not used anymore.
Dealing with callbacks as props in React (dev.to)
Feb 17, 2019
React is a great library. It simplifies our work. We don't write all mutations ourselves, we describe result in render functions. Sometimes we have to render huge lists or optimize our code. In those case, we usually use PureComponent and memo. But, if we don't use callbacks correctly we can lose all profit from PureComponent. So, how to deal with callbacks and event listeners in React?
Don't create conflicting props (sid.studio)
Dec 21, 2018
When it comes to React components, props are the API that developers consume. A good API should be obvious, something the developer can guess. You want to make it easier for the developer to implement their feature and move on.
Computed Properties in React (daveceddia.com)
Aug 14, 2018
Frameworks like Vue have the notion of “computed properties” – a way to derive some new, possibly complex data based on something passed in. This post covers how to achieve the same result in React.
DOM Attributes in React 16 (reactjs.org)
Sep 08, 2017
In the past, React used to ignore unknown DOM attributes. If you wrote JSX with an attribute that React doesn’t recognize, React would just skip it.
Jul 17, 2017
In the previous screencast we took a React component that was doing too much and refactored it, splitting it into two components that are easier to maintain, use and test. Although I’d recommend watching that video first, you don’t need to have watched it to read this blog post.