From 24ebabd01e9aefddcff5615a251e8c9d09fe085e Mon Sep 17 00:00:00 2001 From: Evrim Persembe Date: Tue, 7 Jan 2020 04:11:05 +0400 Subject: [PATCH] Update "Refs and the DOM" documentation (#2657) * Update "Refs and the DOM" documentation As function components can now have state through hooks, remove the part that mentions converting a function component to a class component to be able to use state. * Update refs-and-the-dom.md Co-authored-by: Sophie Alpert --- content/docs/refs-and-the-dom.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/content/docs/refs-and-the-dom.md b/content/docs/refs-and-the-dom.md index 9b56fcc9..8ba52d2f 100644 --- a/content/docs/refs-and-the-dom.md +++ b/content/docs/refs-and-the-dom.md @@ -140,7 +140,7 @@ class CustomTextInput extends React.Component { #### Refs and Function Components {#refs-and-function-components} -**You may not use the `ref` attribute on function components** because they don't have instances: +By default, **you may not use the `ref` attribute on function components** because they don't have instances: ```javascript{1,8,13} function MyFunctionComponent() { @@ -161,7 +161,7 @@ class Parent extends React.Component { } ``` -You should convert the component to a class if you need a ref to it, just like you do when you need lifecycle methods or state. +If you want to allow people to take a `ref` to your function component, you can use [`forwardRef`](https://reactjs.org/docs/forwarding-refs.html) (possibly in conjunction with [`useImperativeHandle`](/docs/hooks-reference.html#useimperativehandle)), or you can convert the component to a class. You can, however, **use the `ref` attribute inside a function component** as long as you refer to a DOM element or a class component: