From 933ddc4688ff19b8b5128435bf8844a47e227a59 Mon Sep 17 00:00:00 2001
From: Matt Carroll <mattca@meta.com>
Date: Fri, 20 Dec 2024 10:41:24 -0800
Subject: [PATCH] Fix style mistakes

---
 src/content/learn/manipulating-the-dom-with-refs.md | 10 +++++-----
 src/content/reference/react/useRef.md               |  4 ++--
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/content/learn/manipulating-the-dom-with-refs.md b/src/content/learn/manipulating-the-dom-with-refs.md
index c1869a631..e366ea7cc 100644
--- a/src/content/learn/manipulating-the-dom-with-refs.md
+++ b/src/content/learn/manipulating-the-dom-with-refs.md
@@ -344,7 +344,7 @@ Read more about [how this helps find bugs](/reference/react/StrictMode#fixing-bu
 ## Accessing another component's DOM nodes {/*accessing-another-components-dom-nodes*/}
 
 <Pitfall>
-Refs are an escape hatch that should be used sparingly. Manually manipulating _another_ component's DOM nodes makes your code even more fragile.
+Refs are an escape hatch. Manually manipulating _another_ component's DOM nodes can make your code fragile.
 </Pitfall>
 
 You can pass refs from parent component to child components [just like any other prop](/learn/passing-props-to-a-component).
@@ -352,13 +352,13 @@ You can pass refs from parent component to child components [just like any other
 ```js {3-4,9}
 import { useRef } from 'react';
 
-function MyInput({ref}) {
+function MyInput({ ref }) {
   return <input ref={ref} />;
 }
 
 function MyForm() {
   const inputRef = useRef(null);
-  return <><MyInput ref={inputRef} /></>
+  return <MyInput ref={inputRef} />
 }
 ```
 
@@ -371,7 +371,7 @@ The `inputRef` created in `MyForm` now points to the `<input>` DOM element retur
 ```js
 import { useRef } from 'react';
 
-function MyInput({ref}) {
+function MyInput({ ref }) {
   return <input ref={ref} />;
 }
 
@@ -406,7 +406,7 @@ In the above example, the ref passed to `MyInput` is passed on to the original D
 ```js
 import { useRef, useImperativeHandle } from "react";
 
-const MyInput = ({ ref }) => {
+function MyInput({ ref }) {
   const realInputRef = useRef(null);
   useImperativeHandle(ref, () => ({
     // Only expose focus and nothing else
diff --git a/src/content/reference/react/useRef.md b/src/content/reference/react/useRef.md
index 4d7400fdb..8ab53aef3 100644
--- a/src/content/reference/react/useRef.md
+++ b/src/content/reference/react/useRef.md
@@ -455,7 +455,7 @@ Sometimes, you may want to let the parent component manipulate the DOM inside of
 ```js
 import { useRef } from 'react';
 
-const MyInput = ({ref}) => {
+function MyInput({ ref }) {
   return <input ref={ref} />;
 };
 
@@ -576,7 +576,7 @@ export default function MyInput({ value, onChange }) {
 And then add `ref` to the list of props your component accepts and pass `ref` as a prop to the relevent child [built-in component](/reference/react-dom/components/common) like this:
 
 ```js {1,6}
-const MyInput = ({ value, onChange, ref}) => {
+function MyInput({ value, onChange, ref }) {
   return (
     <input
       value={value}