javascript: Time is a Hidden Variable in JavaScript

Time causes bugs. This is because we often don't know how to handle the many different scenarios that emerge when dealing with asynchronous code. A main goal of this course is to help your feel comfortable attacking bugs due to time so you can build the ... more

javascript: Compose Closures and Callbacks to Create New Functions

Composition is all about passing one function to another to create a new function. Many libraries have utility functions (which you can write on your own) that allow you to express composition as a list of functions instead of a messy function inside ... more

javascript: What Is a Callback in JavaScript

If you've used `addEventListener`, `Array.filter`, or many other methods in JavaScript, then you've already used a callback. Callbacks are often invoked inside of APIs of libraries where we don't get to see them called. This course explores internals ... more

javascript: Pass a Done Symbol when an Async Function is Done

All good things come to an end. The concept of "done" plays a large part in our pattern and asynchronous code in general. We have to be able to handle when a broadcaster has completed its passing values so we can know what to do next. ## Congrats ... more

javascript: Pass an Array to a Callback with a forOf Function

The patterns we've established can also work well with plain old Objects and Arrays. We just have to capture the behavior of accessing those values inside of our broadcaster so the values can be passed down into a listener. ... more

javascript: What Is a Closure in JavaScript

When working with closures you'll often hear the words "capture", "wrap", or "enclose". The entire idea behind a closure is to take a variable outside of the function and use that variable inside the function. A closure enables ... more

javascript: Can a Function Be a Closure and a Callback?

The short answer: "yes". Functions have a lot of names: predicates, lambdas, reducers, etc. It all depends on the usage of the function or if its inputs/outputs match certain rules. This lesson shows how closures and callbacks are both types ... more

javascript: Combine Multiple Async Behaviors with a Merge Function

We've reached the point where established broadcasters and we can begin to use them together. This lesson walks through creating a `merge` function which can take two broadcasters and listen to both of them. ... more

javascript: Create a Buffer to Pair Values Together with Zip

Functions returning functions returning functions can begin to look a bit unwieldy. The arrow function has helped the syntax a lot, but maybe using a curry utility function to combine all the arguments into a single function will help your syntax look ... more

javascript: Match Function Requirements with Lodash Partial and Flip

Functions returning functions returning functions can begin to look a bit unwieldy. The arrow function has helped the syntax a lot, but maybe using a curry utility function to combine all the arguments into a single function will help your syntax look ... more

javascript: Use Lodash Curry When Functions Return Functions

Functions returning functions returning functions can begin to look a bit unwieldy. The arrow function has helped the syntax a lot, but maybe using a `curry` utility function to combine all the arguments into a single function will help your syntax look ... more

javascript: Return a Function to Cancel an Async Behavior

Cancelation is huge part of async code, but again, APIs in JavaScript are inconsistent. We can develop our own pattern to allow us full control over how cancelation behaves so that our functions can work together. ... more

javascript: Create a Utility Function to Control setInterval

We also need to control setInterval since so many async scenarios rely on timers. The pattern we've created so far matches up nicely and our confidence grows that we'll be able to use these functions together. ... more

javascript: Wrap addEventListener in a Function for More Control

As we develop our pattern further, we can see how it can apply to all async scenarios in JavaScript. All user events go through addEventListener, so making sure we have control over how addEventListener interacts with other APIs, like setTimeout, gives ... more

javascript: Create a Function to Configure setTimeout

JavaScript is full of inconsistent APIs. Wrapping those APIs in functions allows you to have full control over how to configure them and make them more reusable. This lesson walks through wrapping setTimeout in a function that allows you to pass in custom ... more

javascript: Map a Sequence Based on Values

A sequence is often based on a series of values pre-defined in an Array. This lesson shows you how to take advantage of a buffer and the `done` values to split an Array into an asynchronous sequence of values. ## Congrats on finishing Section 05: Use ... more

javascript: Create a Sequence of Broadcasters

Many scenarios involve one task happening after another has completed. This lesson walks you through setting up "steps" which trigger one after another to create an asynchronous sequence of tasks. ... more

javascript: Comparing Repeat to Start

`repeatWhen` and `startWhen` both use the concept of an "outer broadcaster" controlling an "inner broadcaster". This lesson explores how the two compare and the importance of understanding their relationships and determining when they're ... more

javascript: Marking Done Based on a Condition

Asynchronous code often uses conditions to determine when a block of code should finish running. This lesson walks through writing a `doneIf` operator which can check the current value passed through against a custom condition and pass a `done` value ... more

javascript: Repeat When Done with a Repeat Operator

Apps often have scenarios where one event controls another. In operators, this requires passing one broadcaster in and using it to control another broadcaster. You can think, "when this broadcaster fires, do that with the other broadcaster". ... more

javascript: Repeat a Broadcaster that Is Done

After a broadcaster is "done", starting it up again requires calling the broadcaster with the same listener. This creates a kind of "async recursion" where you pass the listener back into the broadcaster each time you set it up. This ... more

javascript: Create an ifElse Operator to Fork on a Condition

So far, we've used `filter` to prevent values when a condition is met. Sometimes you want two different behaviors based on a condition which is where you would naturally reach for an `if` and an `else`. Let's take a look at what an `ifElse` operator would ... more

react: Make React Function Components Stateful with useState

For function components, the `useState` hook is how you make your component stateful. This replaces the previous convention from class components where values were stored in a `this.state` object and manipulated using `this.setState()`. The hook returns ... more

react: Control component side effects with React useEffect

The `useEffect` hook is used to handle side-effects caused by a component's actions such as fetching data from an API, attaching event listeners to the document or manipulating the DOM itself. `useEffect` takes two values: a function defining the logic ... more

react: Avoid Flashes of Content in React with useLayoutEffect

At first glance, the `useLayoutEffect` and `useEffect` hooks look the same because they have a very similar function signature. There is, however, a subtle but important difference between them: the timing of when they get executed. While `useEffect` ... more

react: Build a Search Component in React with useContext

The `useContext` hook allows you to leverage the React Context API within your function components. This lets your components provide data to their descendants in the component tree while avoiding "prop drilling" (i.e. passing props through ... more

react: Manipulate DOM Elements with useRef in React

The `useRef` hook allows us to leverage React refs within our function components. Refs can be assigned to DOM elements in order to allow us to manipulate them directly. It is important, however, to note that this is somewhat of an anti-pattern in React ... more

javascript: Optimize React Component Performance with useMemo

The `useMemo` hook is a performance optimization in React which leverages "memoization" under the hood. Memoization is essentially an internal caching mechanism that allows functions to avoid re-computing expensive values when receiving the ... more

react: Avoid Unnecessary Re-Renders with Reacts useRef

While React refs are primarily used to interact with DOM elements, `useRef` can also be used to store values in your function components. Unlike `useState`, when this value changes the component will **not** re-render, which means you can leverage `useRef` ... more

react: Build a Form with useReducer in React

Normally, you would use `useState` to store values in your function components. However, when your state value is a complex data object or is comprised of a number of related values, you may want to use `useReducer` instead. This hook allows you to avoid ... more