Issue #16 - Enhance your React skills with useReducer, state machine-based side effect management, and know what mutates in JavaScript land
Discover the benefits of using the useReducer hook as a more powerful alternative to useState, find a new tool for easily adding icons to your projects, and learn how to manage side effects declaratively with statecharts
Tip of the day
David shows us how useReducer is a better useState, and it's easier to adopt than we may think. We can group related values together and spread them in the reducer. When we centralize related data into a reducer, we can ensure data integrity no matter where the updates happen. This is harder to do with useState since you have to defensively program everywhere the setState calls are made; it's less reliable and easy to miss. Also, refactoring code to use explicit events becomes easier.
function Todo (props) {
// Separate useState hooks
const [message, setMessage] = useState("");
const [tags, setTags] = useState([]);
const [status, setStatus] = useState("active");
// Single useReducer hook
const [todo, updateTodo] = useReducer(
(data, partialData) => ({
...data,
...partialData
}),
{ message: "", tags: [], status: "active" }
);
}
// in render
<input
type="text"
value={message}
// Updating with useState
onChange={(e) => {
setMessage(e.target.value); // Can only update one value at a time
}}
// Updating with useReducer
onChange={(e) => {
updateTodo ({
message: e.target.value, // Can update multiple properties
});
}}
/>Articles
Learn how and when to use useEffect in React to manage side effects, with visual examples to better understand their importance and proper usage in your applications.
In this article Kyle argues why all the hooks in your application should be created as custom ones for providing better context and making your components more declarative with examples.
by Kyle Shevlin
Tools
A concise list of JavaScript methods with a warning flag to indicate mutation, including code examples and descriptions.
SVGBox allows you to add icons to your project by using simple tags. The idea behind the service is that including icons should be as simple as copying and pasting. It's free and icons are delivered over Cloudflare CDN
Tech Talks
Side effects can be a major source of frustration in web app development, from fetching data to dealing with imperative APIs. While the useEffect hook can help, it's not always a complete solution. However, there is a way to simplify and declaratively orchestrate effects using state machines and statecharts, which are based on computer science principles. In this talk, explore how these tools can be used to effectively manage side effects in our React apps, even as they become more complex.
Quiz
What is the output of the following snippet?
const foo = {
bar: 'baz',
qux() {
console.log(this.bar)
}
};const baz = { bar: 'foo' };
const qux = foo.qux;
foo.qux(); baz.qux = foo.qux; baz.qux(); qux();
baz foo baz
undefined undefined undefined
baz foo undefined
baz baz undefined
This week in GIF
When I ignore all the warnings and start running my build
Liked this issue? Share on Twitter or read previous issues.