From 452203c3a1a467be5300d1166429cd30e8b11c42 Mon Sep 17 00:00:00 2001 From: Brian Vaughn Date: Wed, 6 Jun 2018 14:20:56 -0400 Subject: [PATCH] Tweaked wording based on feedback --- content/blog/2018-06-07-you-probably-dont-need-derived-state.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/blog/2018-06-07-you-probably-dont-need-derived-state.md b/content/blog/2018-06-07-you-probably-dont-need-derived-state.md index 3f65dc84..b1ceebf3 100644 --- a/content/blog/2018-06-07-you-probably-dont-need-derived-state.md +++ b/content/blog/2018-06-07-you-probably-dont-need-derived-state.md @@ -240,7 +240,7 @@ The parent form component could then [use a `ref` to call this method](/docs/glo To recap, when designing a component, it is important to decide whether its data will be controlled or uncontrolled. -If you're trying to **"mirror" a prop value in the state**, you can make the component **controlled**, and consolidate the two diverging values in the state of some parent component. For example, rather than accepting a "committed" `props.value` and tracking a "draft" `state.value`, a component could only display `props.value` and call `props.onChange` to notify the parent of a "draft" update. A form component above could then explicitly manage both values in its own state, (e.g. `state.draftValue` and `state.committedValue`), pass one of them down, and reset either of them when appropriate. (Don't forget you can use a nested object if the form contains multiple fields!) +Instead of trying to **"mirror" a prop value in state**, make the component **controlled**, and consolidate the two diverging values in the state of some parent component. For example, rather than accepting a "committed" `props.value` and tracking a "draft" `state.value`, a component could only display `props.value` and call `props.onChange` to notify the parent of a "draft" update. A form component above could then explicitly manage both values in its own state, (e.g. `state.draftValue` and `state.committedValue`), pass one of them down, and reset either of them when appropriate. (Don't forget you can use a nested object if the form contains multiple fields!) For **uncontrolled** components, if you're trying to **"reset" one or more state fields** when a particular unrelated prop (usually an ID) changes, you have a few options: 1. To reset _all internal state_, use the `key` attribute.