Encapsulate state#253
Conversation
There was a problem hiding this comment.
Pull Request Overview
This PR introduces a new article that advocates for encapsulating state within components rather than exposing all state as props. The article uses a "SpecialButton" component as an example to demonstrate how state encapsulation leads to better testability and usability.
- Demonstrates the difference between fully controlled components (state as props) versus encapsulated components (state managed internally)
- Provides practical examples comparing testing approaches for both patterns
- Discusses how state management tools like TanStack Query influence this design pattern
Reviewed Changes
Copilot reviewed 5 out of 6 changed files in this pull request and generated 5 comments.
Show a summary per file
| File | Description |
|---|---|
| src/routes/drafts/encapsulate_as_much_state_as_possible.mdx | Main article content explaining state encapsulation benefits with code examples and comparisons |
| src/demos/encapsulate-state/special-button.css | Styling for the example button component in different states (pending, loading, success, error) |
| src/demos/encapsulate-state/SpecialButton2.tsx | Improved button component that encapsulates state management internally |
| src/demos/encapsulate-state/SpecialButton.tsx | Example of the anti-pattern: fully controlled button component with external state |
| src/demos/encapsulate-state/Demo.tsx | Demo wrapper component that uses the encapsulated button pattern |
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
|
|
||
| <GithubPermalinkRsc permalink="https://github.com/dwjohnston/example-react-autocomplete/blob/6fe3dbbf3dba880579edf74541386e67fa3693c2/src/lib/SpecialButton/SpecialButton.test.tsx#L129-L156"/> | ||
|
|
||
| This is no test at all. We're simply stipulating that the props changed accurately, there's no gurantee that our parent component will infact make this change correctly. |
There was a problem hiding this comment.
Corrected spelling: 'infact' should be 'in fact'.
| This is no test at all. We're simply stipulating that the props changed accurately, there's no gurantee that our parent component will infact make this change correctly. | |
| This is no test at all. We're simply stipulating that the props changed accurately, there's no gurantee that our parent component will in fact make this change correctly. |
There was a problem hiding this comment.
Pull Request Overview
Copilot reviewed 9 out of 10 changed files in this pull request and generated 3 comments.
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
|
|
||
| Importantly, coming back to the debouncing, <TextHighlight comment={<p> | ||
| Cancelling logic will require changing the component interface, such that the searchFn returns some kind of <code>AbortablePromise</code> instead of a regular <code>Promise</code>. | ||
| </p>}>cancelling</TextHighlight>, pagination logic, all of that is _encapusulated_, hidden away inside, the component - the consumer does not need to think about, it's all taken care of for them. No newline at end of file |
There was a problem hiding this comment.
Corrected spelling of 'encapusulated' to 'encapsulated'.
| </p>}>cancelling</TextHighlight>, pagination logic, all of that is _encapusulated_, hidden away inside, the component - the consumer does not need to think about, it's all taken care of for them. | |
| </p>}>cancelling</TextHighlight>, pagination logic, all of that is _encapsulated_, hidden away inside, the component - the consumer does not need to think about, it's all taken care of for them. |
| SHOW_TEST_PAGES=true | ||
| SHOW_DRAFT_PAGES=true No newline at end of file | ||
| SHOW_DRAFT_PAGES=true | ||
| GITHUB_TOKEN=${GITHUB_TOKEN_READONLY} No newline at end of file |
There was a problem hiding this comment.
Environment variable reference syntax is incorrect. In .env files, variable expansion like ${GITHUB_TOKEN_READONLY} typically doesn't work as expected. This should either be a direct value or the consuming code should handle the indirection.
| GITHUB_TOKEN=${GITHUB_TOKEN_READONLY} | |
| # GITHUB_TOKEN=your_token_here |
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
dwjohnston
force-pushed
the
encapsulate-state
branch
from
d1c4903 to
7bb9874
Compare
There was a problem hiding this comment.
Pull Request Overview
Copilot reviewed 7 out of 9 changed files in this pull request and generated 1 comment.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
No description provided.