From 60d65ce23a303093532f6543213c97db691d1adc Mon Sep 17 00:00:00 2001 From: Brian Vaughn Date: Mon, 12 Feb 2018 15:26:25 -0800 Subject: [PATCH] Wordsmithing --- content/blog/2018-02-07-strict-mode.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/content/blog/2018-02-07-strict-mode.md b/content/blog/2018-02-07-strict-mode.md index b5eb1890..81bdda0f 100644 --- a/content/blog/2018-02-07-strict-mode.md +++ b/content/blog/2018-02-07-strict-mode.md @@ -51,10 +51,10 @@ Since object refs were largely added as a replacement for string refs, strict mo ### Detecting unexpected side effects Conceptually, React does work in two phases: -* The **render** phase determines what changes need to be made to e.g. the DOM. During this phase, React calls lifecycles like `getDerivedStateFromProps` and `render` and then compares the result to the previous render. -* The **commit** phase is when React applies any changes. (In the case of ReactDOM, this is when React inserts, updates, and removes DOM nodes.) React calls lifecycles like `componentDidMount` and `componentDidUpdate` during this phase. +* The **render** phase determines what changes need to be made to e.g. the DOM. During this phase, React calls `render` and then compares the result to the previous render. +* The **commit** phase is when React applies any changes. (In the case of ReactDOM, this is when React inserts, updates, and removes DOM nodes.) React also calls lifecycles like `componentDidMount` and `componentDidUpdate` during this phase. -The commit phase is very fast, but rendering can be slow. For this reason, async mode breaks rendering into multiple pieces, pausing and resuming the work to avoid blocking the browser. This means that React may invoke render phase lifecycles more than once before committing, or it may invoke them without committing at all (because of an error or a higher priority interruption). +The commit phase is usually very fast, but rendering can be slow. For this reason, the upcoming async mode (which is not enabled by default yet) breaks rendering into multiple pieces, pausing and resuming the work to avoid blocking the browser. This means that React may invoke render phase lifecycles more than once before committing, or it may invoke them without committing at all (because of an error or a higher priority interruption). Render phase lifecycles include the following class component methods: * `constructor` @@ -64,7 +64,7 @@ Render phase lifecycles include the following class component methods: * `getDerivedStateFromProps` * `shouldComponentUpdate` * `render` -* `setState` updater functions +* `setState` updater functions (the first argument) Because the above methods might be called more than once, it's important that they do not contain side-effects. Ignoring this rule can lead to a variety of problems, including memory leaks and invalid application state. Unfortunately, it can be difficult to detect these problems as they are often [non-deterministic](https://en.wikipedia.org/wiki/Deterministic_algorithm). @@ -72,7 +72,7 @@ Strict mode can't automatically detect side effects for you, but it can help you * Class component `constructor` method * The `render` method -* `setState` updater functions +* `setState` updater functions (the first argument) * The static `getDerivedStateFromProps` lifecycle > Note: