-
Notifications
You must be signed in to change notification settings - Fork 1.1k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
104108c
commit 1f152f6
Showing
24 changed files
with
67 additions
and
185 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1 +1,9 @@ | ||
# Latest Ref | ||
|
||
Great work. If you've got a bit more time and you haven't already read this | ||
post, I suggest you give these a read: | ||
|
||
- [How React Uses Closures to Avoid Bugs](https://epicreact.dev/how-react-uses-closures-to-avoid-bugs) | ||
- [The Latest Ref Pattern in React](https://epicreact.dev/the-latest-ref-pattern-in-react) | ||
|
||
With great power comes great responsibility. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1 +1,6 @@ | ||
# Composition and Layout Components | ||
|
||
In this one we didn't actually change any visual behavior (the test was passing | ||
before your changes). But we hopefully demonstrated how restructuring your | ||
components can make it easier to maintain and help you avoid the prop drilling | ||
problem and reduce the amount you feel you need to use `useContext`. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1 +1,6 @@ | ||
# Compound Components | ||
|
||
This is an extremely powerful feature that gives us nice and declarative APIs | ||
for our reusable components. However, it's possible people could be using it | ||
wrong so let's explore a way to help people avoid using our API incorrectly | ||
next. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
5 changes: 5 additions & 0 deletions
5
exercises/03.compound-components/02.solution.validation/README.mdx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1 +1,6 @@ | ||
# Compound Components Validation | ||
|
||
Runtime validation isn't the best (it would be better if we could enforce this | ||
statically via TypeScript), but unfortunately it's the best we can do with the | ||
composition model offered by React. That said, we it's unlikely people will mess | ||
this up now that we have this runtime validation in place. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1 +1,4 @@ | ||
# Prop Collections | ||
|
||
Prop collections are great for handling common use cases for your hooks, but | ||
there's a subtle but important limitation with them that we should address next. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1 +1,6 @@ | ||
# Prop Getters | ||
|
||
Great, now users don't have to worry about whether they're overriding us or | ||
we're overriding them and everything can be an implementation detail which we | ||
can change as needed without worrying about breaking people's expectations. | ||
Composition FTW! |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1 +1,4 @@ | ||
# State Initializer | ||
|
||
This is a simple, yet powerful pattern for a variety of use cases. However | ||
there's one subtle bug we should address before we continue... |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
7 changes: 7 additions & 0 deletions
7
exercises/05.state-initializer/02.solution.initial/README.mdx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1 +1,8 @@ | ||
# Handle changing the `initialOn` | ||
|
||
This is a pretty subtle behavior and it may feel unnecessary to handle this, but | ||
it's important that the prefix of `initial` be honored in the way we treat it | ||
and so the `ref` is absolutely necessary. | ||
|
||
If someone really did want to reset our component to a brand new initial state, | ||
they could use the `key` prop to force a remount of the component. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1 +1,6 @@ | ||
# State Reducer | ||
|
||
This is a powerful example of inversion of control that allows users to | ||
overwrite our entire reducer. But it could be exhausting to users to have to | ||
duplicate most of our reducer just to change a few things. So let's address that | ||
common scenario next. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1 +1,5 @@ | ||
# Default State Reducer | ||
|
||
It's a pretty simple, yet powerful solution. Inversion of control with good | ||
defaults allows our component users to have a lot more power and will reduce the | ||
amount of feature requests you get for these components by a lot, I promise. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1 +1,10 @@ | ||
# Control Props | ||
|
||
Phew! That was a tough one! But it's extremely powerful. It wouldn't be hard if | ||
we just wanted to lift the state. What makes it hard is wanting to have a single | ||
component that can not only manage its own state, but also have that state be | ||
managed externally as well. | ||
|
||
All that said, things can act funny if they switch from controlled to | ||
uncontrolled and vice versa. If that ever happens, it's probably a mistake. | ||
Let's dive into that idea a bit. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1 +1,5 @@ | ||
# Control Prop Warnings | ||
|
||
Feel free to check out the utility for this in `shared/utils.tsx` if you like. | ||
It takes a minute to wrap your head around it, but it's pretty simple when you | ||
get down to it. |