text: So let me get this right. This means that we would be able to read context values conditionally, and actually, we've then learned in this tweet from Andrew Clarke that we already can. We already can call use context conditionally. But why? Why can use context be used conditionally, while other hooks can't? That's the question we're going to try to answer today.
  To understand why use context can be used conditionally, we'll first need to understand why other hooks can't. And to understand this, we'll need to understand how hooks work. Where is a hook's data stored? How does React keep track of our data through time and render? To understand the difference of use context, we'll first need to understand React. So let's begin with this first question.
  Where is our hook's data stored? Where is our component data stored? When we build our app for the first time, React is going to build this virtual tree made of our React components. This tree is called the fiber tree. The fiber tree keeps track of the React components that make up our app. And from this tree, React is going to inject our HTML elements into the DOM to display our application on the screen. The fiber tree keeps in memory through time and re-render information about our components, their data, their props, and their states. This way, when the re-render happens, React knows which elements should be—may have been changed, which ones should be rendered, and which information should be updated in the DOM.
  So the first time we build our app, React creates this fiber tree. Every time we instantiate a React component, React adds a node into the tree. And such a node is called a fiber. Let's take a look at one of them. Let's take a look at one fiber at this greetings component. When we instantiate greetings, we're using this JSX syntax, and JSX is actually just syntactic sugar and is equivalent to the call of this JSX function, or create element up to React 17. And this JSX function, when it is executed, will create, we add, a new fiber into the tree. So when you instantiate a component with this JSX syntax, you actually add a node into the tree. You create a new fiber.
  Now, what does a fiber actually look like? Well, a fiber is just an object that holds information about one component. So if we look at this greetings fiber, we have its type, we have its props, props data, I kept in memory inside every fiber, along with a bunch of other states and flags for React to keep track of, and finally, we have its position inside the fiber tree. Speaking of the fiber tree, let's see how it is built. Let's see what happens at first runner when our fiber tree is built. We are going to go through our code, and every time we instantiate a React component with this JSX syntax, React is going to add a fiber into the tree.
  So first off, we have this app component that has the username in this state that it passes to this greetings component, which displays it into a paragraph, and finally, we have this button that we can click to change our username. And here we go.