From 905a1134c07ea24aa4e4e4351371cf77b027280a Mon Sep 17 00:00:00 2001 From: Brian Mitchell Date: Mon, 18 Mar 2019 12:24:24 -0500 Subject: [PATCH 01/15] Add React Rally 2019 (#1840) --- content/community/conferences.md | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/content/community/conferences.md b/content/community/conferences.md index e138b119a..ea8613c78 100644 --- a/content/community/conferences.md +++ b/content/community/conferences.md @@ -57,6 +57,11 @@ July 15-21, 2019. New York City, USA [Website](https://reactweek.nyc) - [Twitter](https://twitter.com/ReactWeek) +### React Rally 2019 +August 22-23, 2019. Salt Lake City, USA. + +[Website](https://www.reactrally.com/) - [Twitter](https://twitter.com/ReactRally) - [Instagram](https://www.instagram.com/reactrally/) + ### ComponentsConf 2019 {#componentsconf-2019} September 6, 2019 in Melbourne, Australia [Website](https://www.componentsconf.com.au/) - [Twitter](https://twitter.com/componentsconf) From 806da34988106c2a92c9784edc2bc0e91333ca4a Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Tue, 19 Mar 2019 15:28:18 +0000 Subject: [PATCH 02/15] Add a DOM measurement recipe to Hooks FAQ (#1843) * Add a DOM measurement recipe to Hooks FAQ * Update content/docs/hooks-faq.md Co-Authored-By: gaearon * Update content/docs/hooks-faq.md Co-Authored-By: gaearon --- content/docs/hooks-faq.md | 55 +++++++++++++++++++++++++++++++++++++++ 1 file changed, 55 insertions(+) diff --git a/content/docs/hooks-faq.md b/content/docs/hooks-faq.md index 9016fa7f4..1e68b379c 100644 --- a/content/docs/hooks-faq.md +++ b/content/docs/hooks-faq.md @@ -41,6 +41,7 @@ This page answers some of the frequently asked questions about [Hooks](/docs/hoo * [How do I implement getDerivedStateFromProps?](#how-do-i-implement-getderivedstatefromprops) * [Is there something like forceUpdate?](#is-there-something-like-forceupdate) * [Can I make a ref to a function component?](#can-i-make-a-ref-to-a-function-component) + * [How can I measure a DOM node?](#how-can-i-measure-a-dom-node) * [What does const [thing, setThing] = useState() mean?](#what-does-const-thing-setthing--usestate-mean) * **[Performance Optimizations](#performance-optimizations)** * [Can I skip an effect on updates?](#can-i-skip-an-effect-on-updates) @@ -451,6 +452,60 @@ Try to avoid this pattern if possible. While you shouldn't need this often, you may expose some imperative methods to a parent component with the [`useImperativeHandle`](/docs/hooks-reference.html#useimperativehandle) Hook. +### How can I measure a DOM node? {#how-can-i-measure-a-dom-node} + +In order to measure the position or size of a DOM node, you can use a [callback ref](/docs/refs-and-the-dom.html#callback-refs). React will call that callback whenever the ref gets attached to a different node. Here is a [small demo](https://codesandbox.io/s/l7m0v5x4v9): + +```js{4-8,12} +function MeasureExample() { + const [height, setHeight] = useState(0); + + const measuredRef = useCallback(node => { + if (node !== null) { + setHeight(node.getBoundingClientRect().height); + } + }, []); + + return ( + <> +

Hello, world

+

The above header is {Math.round(height)}px tall

+ + ); +} +``` + +We didn't choose `useRef` in this example because an object ref doesn't notify us about *changes* to the current ref value. Using a callback ref ensures that [even if a child component displays the measured node later](https://codesandbox.io/s/818zzk8m78) (e.g. in response to a click), we still get notified about it in the parent component and can update the measurements. + +Note that we pass `[]` as a dependency array to `useCallback`. This ensures that our ref callback doesn't change between the re-renders, and so React won't call it unnecessarily. + +If you want, you can [extract this logic](https://codesandbox.io/s/m5o42082xy) into a reusable Hook: + +```js{2} +function MeasureExample() { + const [rect, ref] = useClientRect(); + return ( + <> +

Hello, world

+ {rect !== null && +

The above header is {Math.round(rect.height)}px tall

+ } + + ); +} + +function useClientRect() { + const [rect, setRect] = useState(null); + const ref = useCallback(node => { + if (node !== null) { + setRect(node.getBoundingClientRect()); + } + }, []); + return [rect, ref]; +} +``` + + ### What does `const [thing, setThing] = useState()` mean? {#what-does-const-thing-setthing--usestate-mean} If you're not familiar with this syntax, check out the [explanation](/docs/hooks-state.html#tip-what-do-square-brackets-mean) in the State Hook documentation. From ac4aa6546e413bc6bdc6d8191081b739fbc6fb27 Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Tue, 19 Mar 2019 17:12:44 +0000 Subject: [PATCH 03/15] Add more explanations to Hooks API page (#1845) * Add more explanations to API page * static * add info about useLayoutEffect * Update content/docs/hooks-reference.md Co-Authored-By: gaearon * nits * nit --- content/docs/hooks-faq.md | 4 ++-- content/docs/hooks-reference.md | 39 ++++++++++++++++++++++++++++----- 2 files changed, 36 insertions(+), 7 deletions(-) diff --git a/content/docs/hooks-faq.md b/content/docs/hooks-faq.md index 1e68b379c..7d2953293 100644 --- a/content/docs/hooks-faq.md +++ b/content/docs/hooks-faq.md @@ -908,7 +908,7 @@ function Form() { const [text, updateText] = useState(''); const textRef = useRef(); - useLayoutEffect(() => { + useEffect(() => { textRef.current = text; // Write it to the ref }); @@ -949,7 +949,7 @@ function useEventCallback(fn, dependencies) { throw new Error('Cannot call an event handler while rendering.'); }); - useLayoutEffect(() => { + useEffect(() => { ref.current = fn; }, [fn, ...dependencies]); diff --git a/content/docs/hooks-reference.md b/content/docs/hooks-reference.md index 4daf0f191..f2cc087d4 100644 --- a/content/docs/hooks-reference.md +++ b/content/docs/hooks-reference.md @@ -97,6 +97,8 @@ const [state, setState] = useState(() => { If you update a State Hook to the same value as the current state, React will bail out without rendering the children or firing effects. (React uses the [`Object.is` comparison algorithm](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is#Description).) +Note that React may still need to render that specific component again before bailing out. That shouldn't be a concern because React won't unnecessarily go "deeper" into the tree. If you're doing expensive calculations while rendering, you can optimize them with `useMemo`. + ### `useEffect` {#useeffect} ```js @@ -173,12 +175,24 @@ The array of dependencies is not passed as arguments to the effect function. Con ### `useContext` {#usecontext} ```js -const context = useContext(Context); +const value = useContext(MyContext); ``` -Accepts a context object (the value returned from `React.createContext`) and returns the current context value, as given by the nearest context provider for the given context. +Accepts a context object (the value returned from `React.createContext`) and returns the current context value for that context. The current context value is determined by the `value` prop of the nearest `` above the calling component in the tree. + +When the nearest `` above the component updates, this Hook will trigger a rerender with the latest context `value` passed to that `MyContext` provider. -When the provider updates, this Hook will trigger a rerender with the latest context value. +Don't forget that the argument to `useContext` must be the *context object itself*: + + * **Correct:** `useContext(MyContext)` + * **Incorrect:** `useContext(MyContext.Consumer)` + * **Incorrect:** `useContext(MyContext.Provider)` + +>Tip +> +>If you're familiar with the context API before Hooks, `useContext(MyContext)` is equivalent to `static contextType = MyContext` in a class, or to ``. +> +>`useContext(MyContext)` only lets you *read* the context and subscribe to its changes. You still need a `` above in the tree to *provide* the value for this context. ## Additional Hooks {#additional-hooks} @@ -285,6 +299,8 @@ function Counter({initialCount}) { If you return the same value from a Reducer Hook as the current state, React will bail out without rendering the children or firing effects. (React uses the [`Object.is` comparison algorithm](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is#Description).) +Note that React may still need to render that specific component again before bailing out. That shouldn't be a concern because React won't unnecessarily go "deeper" into the tree. If you're doing expensive calculations while rendering, you can optimize them with `useMemo`. + ### `useCallback` {#usecallback} ```js @@ -356,7 +372,16 @@ function TextInputWithFocusButton() { } ``` -Note that `useRef()` is useful for more than the `ref` attribute. It's [handy for keeping any mutable value around](/docs/hooks-faq.html#is-there-something-like-instance-variables) similar to how you'd use instance fields in classes. +Essentially, `useRef` is like a "box" that can hold a mutable value in its `.current` property. + +You might be familiar with refs primarily as a way to [access the DOM](/docs/refs-and-the-dom.html). If you pass a ref object to React with `
`, React will set its `.current` property to the corresponding DOM node whenever that node changes. + +However, `useRef()` is useful for more than the `ref` attribute. It's [handy for keeping any mutable value around](/docs/hooks-faq.html#is-there-something-like-instance-variables) similar to how you'd use instance fields in classes. + +This works because `useRef()` creates a plain JavaScript object. The only difference between `useRef()` and creating a `{current: ...}` object yourself is that `useRef` will give you the same ref object on every render. + +Keep in mind that `useRef` *doesn't* notify you when its content changes. Mutating the `.current` property doesn't cause a re-render. If you want to run some code when React attaches or detaches a ref to a DOM node, you may want to use a [callback ref](/docs/hooks-faq.html#how-can-i-measure-a-dom-node) instead. + ### `useImperativeHandle` {#useimperativehandle} @@ -389,7 +414,11 @@ Prefer the standard `useEffect` when possible to avoid blocking visual updates. > Tip > -> If you're migrating code from a class component, `useLayoutEffect` fires in the same phase as `componentDidMount` and `componentDidUpdate`, so if you're unsure of which effect Hook to use, it's probably the least risky. +> If you're migrating code from a class component, note `useLayoutEffect` fires in the same phase as `componentDidMount` and `componentDidUpdate`. However, **we recommend starting with `useEffect` first** and only trying `useLayoutEffect` if that causes a problem. +> +>If you use server rendering, keep in mind that *neither* `useLayoutEffect` nor `useEffect` can run until the JavaScript is downloaded. This is why React warns when a server-rendered component contains `useLayoutEffect`. To fix this, either move that logic to `useEffect` (if it isn't necessary for the first render), or delay showing that component until after the client renders (if the HTML looks broken until `useLayoutEffect` runs). +> +>To exclude a component that needs layout effects from the server-rendered HTML, render it conditionally with `showChild && ` and defer showing it with `useEffect(() => { setShowChild(true); }, [])`. This way, the UI doesn't appear broken before hydration. ### `useDebugValue` {#usedebugvalue} From b1bc193dbad464f7c659b10f3f57e37e265a063e Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Tue, 19 Mar 2019 22:09:21 +0000 Subject: [PATCH 04/15] Document useContext bailout strategy (#1848) --- content/docs/hooks-reference.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/content/docs/hooks-reference.md b/content/docs/hooks-reference.md index f2cc087d4..98c2e14c0 100644 --- a/content/docs/hooks-reference.md +++ b/content/docs/hooks-reference.md @@ -188,6 +188,8 @@ Don't forget that the argument to `useContext` must be the *context object itsel * **Incorrect:** `useContext(MyContext.Consumer)` * **Incorrect:** `useContext(MyContext.Provider)` +A component calling `useContext` will always re-render when the context value changes. If re-rendering the component is expensive, you can [optimize it by using memoization](https://github.com/facebook/react/issues/15156#issuecomment-474590693). + >Tip > >If you're familiar with the context API before Hooks, `useContext(MyContext)` is equivalent to `static contextType = MyContext` in a class, or to ``. From 1f2dbb7a4f531d1c9d70ae69e025eac992b37c6a Mon Sep 17 00:00:00 2001 From: Nat Alison Date: Wed, 20 Mar 2019 13:03:43 -0700 Subject: [PATCH 05/15] Update languages for Simplified Chinese completion (#1854) * Update languages for Simplified Chinese completion * Update languages.yml --- content/languages.yml | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/content/languages.yml b/content/languages.yml index 5e0958260..524c41c73 100644 --- a/content/languages.yml +++ b/content/languages.yml @@ -66,11 +66,15 @@ - name: Italian translated_name: Italiano code: it - status: 0 + status: 1 - name: Japanese translated_name: 日本語 code: ja status: 2 +- name: Georgian + translated_name: ქართული + code: ka + status: 0 - name: Central Khmer translated_name: ភាសាខ្មែរ code: km @@ -126,6 +130,7 @@ - name: Swedish translated_name: Svenska code: sv + status: 0 - name: Tamil translated_name: தமிழ் code: ta @@ -134,6 +139,10 @@ translated_name: తెలుగు code: te status: 0 +- name: Thai + translated_name: ไทย + code: th + status: 0 - name: Turkish translated_name: Türkçe code: tr @@ -157,7 +166,7 @@ - name: Simplified Chinese translated_name: 简体中文 code: zh-hans - status: 1 + status: 2 - name: Traditional Chinese translated_name: 繁體中文 code: zh-hant From e744030ad0c65bcd062b27ca1f442b1dd1c8f1dc Mon Sep 17 00:00:00 2001 From: Saransh Kataria Date: Mon, 25 Mar 2019 12:41:48 -0700 Subject: [PATCH 06/15] removed line as functions can have state now too (#1783) * removed line as functions can have state now too * removed this.setState line from docs --- content/docs/reference-glossary.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/reference-glossary.md b/content/docs/reference-glossary.md index e91fa9eef..bdf3587a5 100644 --- a/content/docs/reference-glossary.md +++ b/content/docs/reference-glossary.md @@ -122,7 +122,7 @@ class Welcome extends React.Component { A component needs `state` when some data associated with it changes over time. For example, a `Checkbox` component might need `isChecked` in its state, and a `NewsFeed` component might want to keep track of `fetchedPosts` in its state. -The most important difference between `state` and `props` is that `props` are passed from a parent component, but `state` is managed by the component itself. A component cannot change its `props`, but it can change its `state`. To do so, it must call `this.setState()`. Only components defined as classes can have state. +The most important difference between `state` and `props` is that `props` are passed from a parent component, but `state` is managed by the component itself. A component cannot change its `props`, but it can change its `state`. For each particular piece of changing data, there should be just one component that "owns" it in its state. Don't try to synchronize states of two different components. Instead, [lift it up](/docs/lifting-state-up.html) to their closest shared ancestor, and pass it down as props to both of them. From ee4188ba072e349ea04a4884ffc08e65ae0c2b57 Mon Sep 17 00:00:00 2001 From: Jenn Creighton Date: Mon, 25 Mar 2019 17:07:34 -0400 Subject: [PATCH 07/15] remove ReactWeek from Conference list (#1864) --- content/community/conferences.md | 5 ----- 1 file changed, 5 deletions(-) diff --git a/content/community/conferences.md b/content/community/conferences.md index ea8613c78..833e44c40 100644 --- a/content/community/conferences.md +++ b/content/community/conferences.md @@ -52,11 +52,6 @@ June 21, 2019 Chicago, Illinois USA [Website](https://reactloop.com) - [Twitter](https://twitter.com/ReactLoop) -### React Week '19 {#RWNY19} -July 15-21, 2019. New York City, USA - -[Website](https://reactweek.nyc) - [Twitter](https://twitter.com/ReactWeek) - ### React Rally 2019 August 22-23, 2019. Salt Lake City, USA. From 448b7f1a2093011279227ca2e5189e4b9228c306 Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Mon, 25 Mar 2019 22:49:13 -0700 Subject: [PATCH 08/15] Remove ReactNYC meetup from the list --- content/community/meetups.md | 1 - 1 file changed, 1 deletion(-) diff --git a/content/community/meetups.md b/content/community/meetups.md index d397a4535..b3f099c81 100644 --- a/content/community/meetups.md +++ b/content/community/meetups.md @@ -130,7 +130,6 @@ Do you have a local React.js meetup? Add it here! (Please keep the list alphabet * [New York, NY - ReactJS](https://www.meetup.com/NYC-Javascript-React-Group/) * [New York, NY - React Ladies](https://www.meetup.com/React-Ladies/) * [New York, NY - React Native](https://www.meetup.com/React-Native-NYC/) -* [New York, NY - ReactNYC](https://www.meetup.com/ReactNYC/) * [Palo Alto, CA - React Native](https://www.meetup.com/React-Native-Silicon-Valley/) * [Phoenix, AZ - ReactJS](https://www.meetup.com/ReactJS-Phoenix/) * [Pittsburgh, PA - ReactJS/React Native](https://www.meetup.com/ReactPgh/) From a1a7ec3a04617ba00de6169a35a7cb4f84811935 Mon Sep 17 00:00:00 2001 From: pixelyunicorn Date: Mon, 25 Mar 2019 22:56:24 -0700 Subject: [PATCH 09/15] Added RQ React meetup in Philadelphia (#1866) --- content/community/meetups.md | 1 + 1 file changed, 1 insertion(+) diff --git a/content/community/meetups.md b/content/community/meetups.md index b3f099c81..4c18b1311 100644 --- a/content/community/meetups.md +++ b/content/community/meetups.md @@ -131,6 +131,7 @@ Do you have a local React.js meetup? Add it here! (Please keep the list alphabet * [New York, NY - React Ladies](https://www.meetup.com/React-Ladies/) * [New York, NY - React Native](https://www.meetup.com/React-Native-NYC/) * [Palo Alto, CA - React Native](https://www.meetup.com/React-Native-Silicon-Valley/) +* [Philadelphia, PA - ReactJS](https://www.meetup.com/RQ-React/) * [Phoenix, AZ - ReactJS](https://www.meetup.com/ReactJS-Phoenix/) * [Pittsburgh, PA - ReactJS/React Native](https://www.meetup.com/ReactPgh/) * [Portland, OR - ReactJS](https://www.meetup.com/Portland-ReactJS/) From 6faeeb809f4f27a34575f881038042f4dd97ef54 Mon Sep 17 00:00:00 2001 From: pavan Date: Tue, 26 Mar 2019 11:28:15 +0530 Subject: [PATCH 10/15] Adding immer in the list of immutable libraries (#1839) * Adding immer in the list of immutable libraries * Update optimizing-performance.md --- content/docs/optimizing-performance.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/optimizing-performance.md b/content/docs/optimizing-performance.md index e42bad7b7..959332976 100644 --- a/content/docs/optimizing-performance.md +++ b/content/docs/optimizing-performance.md @@ -430,6 +430,6 @@ x === z; // true In this case, since a new reference is returned when mutating `x`, we can use a reference equality check `(x === y)` to verify that the new value stored in `y` is different than the original value stored in `x`. -Two other libraries that can help use immutable data are [seamless-immutable](https://github.com/rtfeldman/seamless-immutable) and [immutability-helper](https://github.com/kolodny/immutability-helper). +Other libraries that can help use immutable data include [Immer](https://github.com/mweststrate/immer), [immutability-helper](https://github.com/kolodny/immutability-helper), and [seamless-immutable](https://github.com/rtfeldman/seamless-immutable). Immutable data structures provide you with a cheap way to track changes on objects, which is all we need to implement `shouldComponentUpdate`. This can often provide you with a nice performance boost. From 2304fa1a7c34b719c10cca1023003e22bf0fd137 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ahmad=20Awais=20=E2=9A=A1=EF=B8=8F?= Date: Wed, 27 Mar 2019 00:36:15 +0500 Subject: [PATCH 11/15] =?UTF-8?q?=F0=9F=93=A6=20NEW:=20Add=20React.js=20La?= =?UTF-8?q?hore=20Meetup=20Group=20(#1873)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This PR adds a relatively new sub-meetup-group of a Cloud Developers meetup group in the city of Lahore. --- content/community/meetups.md | 1 + 1 file changed, 1 insertion(+) diff --git a/content/community/meetups.md b/content/community/meetups.md index 4c18b1311..8bd1155d0 100644 --- a/content/community/meetups.md +++ b/content/community/meetups.md @@ -88,6 +88,7 @@ Do you have a local React.js meetup? Add it here! (Please keep the list alphabet ## Pakistan {#pakistan} * [Karachi](https://www.facebook.com/groups/902678696597634/) +* [Lahore](https://www.facebook.com/groups/ReactjsLahore/) ## Peru {#peru} * [Lima](https://www.meetup.com/ReactJS-Peru/) From 4541a8ff10f7f95ce1fdde1fbb9ae9280ec30b43 Mon Sep 17 00:00:00 2001 From: Nat Alison Date: Wed, 27 Mar 2019 19:15:43 -0700 Subject: [PATCH 12/15] Update languages.yml --- content/languages.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/languages.yml b/content/languages.yml index 524c41c73..1660cecb7 100644 --- a/content/languages.yml +++ b/content/languages.yml @@ -146,7 +146,7 @@ - name: Turkish translated_name: Türkçe code: tr - status: 1 + status: 2 - name: Ukrainian translated_name: Українська code: uk From c6f99a6d9a7d69138a5ea243b3b83cab710f7769 Mon Sep 17 00:00:00 2001 From: Nat Alison Date: Wed, 27 Mar 2019 19:16:47 -0700 Subject: [PATCH 13/15] Add kannada to languages --- content/languages.yml | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/content/languages.yml b/content/languages.yml index 1660cecb7..844607526 100644 --- a/content/languages.yml +++ b/content/languages.yml @@ -79,6 +79,10 @@ translated_name: ភាសាខ្មែរ code: km status: 0 +- name: Kannada + translated_name: ಕನ್ನಡ + code: kn + status: 0 - name: Korean translated_name: 한국어 code: ko From 2753191ee2a4fa9a1ecd13fb62aac2a975d9c749 Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Thu, 28 Mar 2019 00:17:49 -0700 Subject: [PATCH 14/15] Bump React versions --- package.json | 4 ++-- src/site-constants.js | 2 +- yarn.lock | 28 ++++++++++++++-------------- 3 files changed, 17 insertions(+), 17 deletions(-) diff --git a/package.json b/package.json index f1628e72e..3e255133b 100644 --- a/package.json +++ b/package.json @@ -46,8 +46,8 @@ "normalize.css": "^8.0.0", "prettier": "^1.7.4", "prismjs": "^1.15.0", - "react": "16.8.3", - "react-dom": "16.8.3", + "react": "16.8.6", + "react-dom": "16.8.6", "react-helmet": "^5.2.0", "react-live": "1.8.0-0", "remarkable": "^1.7.1", diff --git a/src/site-constants.js b/src/site-constants.js index f26103279..4618432e0 100644 --- a/src/site-constants.js +++ b/src/site-constants.js @@ -8,7 +8,7 @@ // NOTE: We can't just use `location.toString()` because when we are rendering // the SSR part in node.js we won't have a proper location. const urlRoot = 'https://reactjs.org'; -const version = '16.8.4'; +const version = '16.8.6'; const babelURL = 'https://unpkg.com/babel-standalone@6.26.0/babel.min.js'; export {babelURL, urlRoot, version}; diff --git a/yarn.lock b/yarn.lock index a3859f100..246285339 100644 --- a/yarn.lock +++ b/yarn.lock @@ -10220,15 +10220,15 @@ react-dev-utils@^4.2.1: strip-ansi "3.0.1" text-table "0.2.0" -react-dom@16.8.3: - version "16.8.3" - resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.8.3.tgz#ae236029e66210783ac81999d3015dfc475b9c32" - integrity sha512-ttMem9yJL4/lpItZAQ2NTFAbV7frotHk5DZEHXUOws2rMmrsvh1Na7ThGT0dTzUIl6pqTOi5tYREfL8AEna3lA== +react-dom@16.8.6: + version "16.8.6" + resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.8.6.tgz#71d6303f631e8b0097f56165ef608f051ff6e10f" + integrity sha512-1nL7PIq9LTL3fthPqwkvr2zY7phIPjYrT0jp4HjyEQrEROnw4dG41VVwi/wfoCneoleqrNX7iAD+pXebJZwrwA== dependencies: loose-envify "^1.1.0" object-assign "^4.1.1" prop-types "^15.6.2" - scheduler "^0.13.3" + scheduler "^0.13.6" react-error-overlay@^3.0.0: version "3.0.0" @@ -10282,15 +10282,15 @@ react-side-effect@^1.1.0: exenv "^1.2.1" shallowequal "^1.0.1" -react@16.8.3: - version "16.8.3" - resolved "https://registry.yarnpkg.com/react/-/react-16.8.3.tgz#c6f988a2ce895375de216edcfaedd6b9a76451d9" - integrity sha512-3UoSIsEq8yTJuSu0luO1QQWYbgGEILm+eJl2QN/VLDi7hL+EN18M3q3oVZwmVzzBJ3DkM7RMdRwBmZZ+b4IzSA== +react@16.8.6: + version "16.8.6" + resolved "https://registry.yarnpkg.com/react/-/react-16.8.6.tgz#ad6c3a9614fd3a4e9ef51117f54d888da01f2bbe" + integrity sha512-pC0uMkhLaHm11ZSJULfOBqV4tIZkx87ZLvbbQYunNixAAvjnC+snJCg0XQXn9VIsttVsbZP/H/ewzgsd5fxKXw== dependencies: loose-envify "^1.1.0" object-assign "^4.1.1" prop-types "^15.6.2" - scheduler "^0.13.3" + scheduler "^0.13.6" read-all-stream@^3.0.0: version "3.1.0" @@ -10964,10 +10964,10 @@ sax@>=0.6.0, sax@^1.2.4, sax@~1.2.1, sax@~1.2.4: resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9" integrity sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw== -scheduler@^0.13.3: - version "0.13.3" - resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.13.3.tgz#bed3c5850f62ea9c716a4d781f9daeb9b2a58896" - integrity sha512-UxN5QRYWtpR1egNWzJcVLk8jlegxAugswQc984lD3kU7NuobsO37/sRfbpTdBjtnD5TBNFA2Q2oLV5+UmPSmEQ== +scheduler@^0.13.6: + version "0.13.6" + resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.13.6.tgz#466a4ec332467b31a91b9bf74e5347072e4cd889" + integrity sha512-IWnObHt413ucAYKsD9J1QShUKkbKLQQHdxRyw73sw4FN26iWr3DY/H34xGPe4nmL1DwXyWmSWmMrA9TfQbE/XQ== dependencies: loose-envify "^1.1.0" object-assign "^4.1.1" From d0f2db967a38e358bd59c65e981862cdf38f3d0b Mon Sep 17 00:00:00 2001 From: Saransh Kataria Date: Thu, 28 Mar 2019 15:51:37 -0700 Subject: [PATCH 15/15] removed sentence since functions can have state (#1878) With introduction of hooks, that statement is not valid anymore --- content/docs/state-and-lifecycle.md | 2 -- 1 file changed, 2 deletions(-) diff --git a/content/docs/state-and-lifecycle.md b/content/docs/state-and-lifecycle.md index cbd8f684a..3967ae7c9 100644 --- a/content/docs/state-and-lifecycle.md +++ b/content/docs/state-and-lifecycle.md @@ -72,8 +72,6 @@ To implement this, we need to add "state" to the `Clock` component. State is similar to props, but it is private and fully controlled by the component. -We [mentioned before](/docs/components-and-props.html#functional-and-class-components) that components defined as classes have some additional features. Local state is exactly that: a feature available only to classes. - ## Converting a Function to a Class {#converting-a-function-to-a-class} You can convert a function component like `Clock` to a class in five steps: