-
-
Notifications
You must be signed in to change notification settings - Fork 4.1k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
chore: tweak effect docs #11982
chore: tweak effect docs #11982
Conversation
|
I agree that the example is bad, but we can't get rid of it - it's the most common better solution. Most of the time you have both the parent and child component under your control and then think you need to use |
Any suggestions? |
@@ -341,49 341,93 @@ In general, `$effect` is best considered something of an escape hatch — useful | |||
|
|||
> For things that are more complicated than a simple expression like `count * 2`, you can also use [`$derived.by`](#$derived-by). | |||
|
|||
When reacting to a state change and writing to a different state as a result, think about if it's possible to use callback props instead. | |||
You might be tempted to do something convoluted with effects to link one value to another. Don't do this ([demo](/#H4sIAAAAAAAAE5WS8UrDMBDGX-UI-yN1ujlFkG4dyKAvYf2jSy8YaNOSXKej9J18Bp_MJG1xThElULgvX-77Hb2OSVWiZfFjx3ReIYvZQ9OwS0bHxhf2gCWhq23dGuGVjRVGNbTNdEYlEghIYGYpJ-TX0XpS5bk66aaudu5O5qXF9amanqpOn6GUKIjzCJItdF7KSNTaEhzyskVnv72BOXABF7Ba3A_Z7oSvksBDVjQ9zeh7tj8GqTV6LPvTHhMVmXay-7HmIX5BdapeseCrIbiP_s7NJVw5-AiWHvxH7vSMO_0n9-4rt_ide7P8_Kl6o3TTEvgFSDKm22qPJmOwV7qIQ4ukEz0st_D-5lL-5JejPw39LR1LDPszvBwHfVEFPcdwh9UAFrBGq1vAqi6UVFiw2M_VP_UfNJIG1bsCAAA=)): |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
You might be tempted to do something convoluted with effects to link one value to another. Don't do this ([demo](/#H4sIAAAAAAAAE5WS8UrDMBDGX-UI-yN1ujlFkG4dyKAvYf2jSy8YaNOSXKej9J18Bp_MJG1xThElULgvX-77Hb2OSVWiZfFjx3ReIYvZQ9OwS0bHxhf2gCWhq23dGuGVjRVGNbTNdEYlEghIYGYpJ-TX0XpS5bk66aaudu5O5qXF9amanqpOn6GUKIjzCJItdF7KSNTaEhzyskVnv72BOXABF7Ba3A_Z7oSvksBDVjQ9zeh7tj8GqTV6LPvTHhMVmXay-7HmIX5BdapeseCrIbiP_s7NJVw5-AiWHvxH7vSMO_0n9-4rt_ide7P8_Kl6o3TTEvgFSDKm22qPJmOwV7qIQ4ukEz0st_D-5lL-5JejPw39LR1LDPszvBwHfVEFPcdwh9UAFrBGq1vAqi6UVFiw2M_VP_UfNJIG1bsCAAA=)): | |
You might be tempted to do something convoluted with effects to link one value to another. The following example shows two inputs for Fahrenheit and Celsius that are connected to each other. If you update one, the other should update accordingly. Don't use effects for this ([demo](/#H4sIAAAAAAAAE5WS8UrDMBDGX-UI-yN1ujlFkG4dyKAvYf2jSy8YaNOSXKej9J18Bp_MJG1xThElULgvX-77Hb2OSVWiZfFjx3ReIYvZQ9OwS0bHxhf2gCWhq23dGuGVjRVGNbTNdEYlEghIYGYpJ-TX0XpS5bk66aaudu5O5qXF9amanqpOn6GUKIjzCJItdF7KSNTaEhzyskVnv72BOXABF7Ba3A_Z7oSvksBDVjQ9zeh7tj8GqTV6LPvTHhMVmXay-7HmIX5BdapeseCrIbiP_s7NJVw5-AiWHvxH7vSMO_0n9-4rt_ide7P8_Kl6o3TTEvgFSDKm22qPJmOwV7qIQ4ukEz0st_D-5lL-5JejPw39LR1LDPszvBwHfVEFPcdwh9UAFrBGq1vAqi6UVFiw2M_VP_UfNJIG1bsCAAA=)): |
``` | ||
|
||
If you want to have something update from above but also modify it from below (i.e. you want some kind of "writable `$derived`"), and events aren't an option, you can also use an object with getters and setters. | ||
If you need to use bindings, for whatever reason, consider using this pattern to synchronise state ([demo](/#H4sIAAAAAAAAE5VRQW7DIBD8CkI9JFIau4deiB2p7yg9kHhtIWGMYG3Fsvh7ARs3qnrpCWZGM8MuC22lAkfZ50K16IEy-mEMPVGcTQRuAoUQsBtGe49M5e5WGrxyzVEBEhxQKFKTt7K8ZM4Z0Bi4F4cC4VAeo7JpCtooLRFz7AIzCTXC4ZgpjhZwtHpLfl3TLqvoT-vpdt_0ZMy92TllVzx8AFXx83pdKXEDlQappDZjmCUMXXNqhe6AU3KTumGppV5StCe9eNRLivekSNZNKTKbYGza0_9XFPdzTvc_257kvTJyvxodzgrWP4pkXlEjnVFiZqRV8NiW0wnDSHl-hz4RPm0p2cO390MjWwkNZWhD5Zf_BkCCa6AxAgAA)): |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
If you need to use bindings, for whatever reason, consider using this pattern to synchronise state ([demo](/#H4sIAAAAAAAAE5VRQW7DIBD8CkI9JFIau4deiB2p7yg9kHhtIWGMYG3Fsvh7ARs3qnrpCWZGM8MuC22lAkfZ50K16IEy-mEMPVGcTQRuAoUQsBtGe49M5e5WGrxyzVEBEhxQKFKTt7K8ZM4Z0Bi4F4cC4VAeo7JpCtooLRFz7AIzCTXC4ZgpjhZwtHpLfl3TLqvoT-vpdt_0ZMy92TllVzx8AFXx83pdKXEDlQappDZjmCUMXXNqhe6AU3KTumGppV5StCe9eNRLivekSNZNKTKbYGza0_9XFPdzTvc_257kvTJyvxodzgrWP4pkXlEjnVFiZqRV8NiW0wnDSHl-hz4RPm0p2cO390MjWwkNZWhD5Zf_BkCCa6AxAgAA)): | |
If you need to use bindings, for whatever reason (for example when you want some kind of "writable `$derived`"), consider using getters and setters to synchronise state ([demo](/#H4sIAAAAAAAAE5VRQW7DIBD8CkI9JFIau4deiB2p7yg9kHhtIWGMYG3Fsvh7ARs3qnrpCWZGM8MuC22lAkfZ50K16IEy-mEMPVGcTQRuAoUQsBtGe49M5e5WGrxyzVEBEhxQKFKTt7K8ZM4Z0Bi4F4cC4VAeo7JpCtooLRFz7AIzCTXC4ZgpjhZwtHpLfl3TLqvoT-vpdt_0ZMy92TllVzx8AFXx83pdKXEDlQappDZjmCUMXXNqhe6AU3KTumGppV5StCe9eNRLivekSNZNKTKbYGza0_9XFPdzTvc_257kvTJyvxodzgrWP4pkXlEjnVFiZqRV8NiW0wnDSHl-hz4RPm0p2cO390MjWwkNZWhD5Zf_BkCCa6AxAgAA)): |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The second example with getters/setters feels easier to grasp - should we use that for the effects vs events example, too?
I preferred the previous example because it showed much more clearly why callbacks are superior — the effect-based solution to spent/left works because no infinite loop is created. As soon as you're dealing with non-primitives, that ceases to be the case. Also, there's a typo — Can we revisit this? |
better examples --------- Co-authored-by: Simon H <5968653 [email protected]> Co-authored-by: Simon Holthausen <[email protected]>
Alternative to #10750. We really do need to get rid of the first example, it's very strange — no clue is given as to why
value_uppercase
isn't just a$derived
value (though if it was then it would be duplicative with the example directly above), and it suggests a rewrite that might not be possible.The second example is also a bit confusing to my eyes — it's rather contrived, and a variable name like
facade
offers no hint as to the intent behind it. This PR replaces it with one that feels a bit more approachable to me