Minor (english) updates to documentation (#688)

Author: barrymay

LICENSE

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2015 gatsbyjs
+Copyright (c) 2019-present Beier(Bill) Luo
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

src/components/ApiGallery.tsx

@@ -94,7 +94,7 @@ export default function ApiGallery({ defaultLang }) {
               </h3>
               <p>
                 A powerful custom hook to validate your form with minimal
-                re-render.
+                re-renders.
               </p>
               <Link to="/api/useform" aria-label={"read more about useForm"}>
                 Read More ▸
@@ -107,8 +107,9 @@ export default function ApiGallery({ defaultLang }) {
                 <code>{`</>`}</code>useController
               </h3>
               <p>
-                It is the go-to hook for Controlled components and isolates its
-                re-render.
+                For Controlled components: interface with the useForm methods
+                and and isolate its re-render. Alternative to RHF's Controller
+                component.
               </p>
               <Link
                 to="/api/usecontroller"
@@ -124,8 +125,9 @@ export default function ApiGallery({ defaultLang }) {
                 <code>{`</>`}</code>useFormContext
               </h3>
               <p>
-                Building large forms and would like to access useForm methods in
-                context.
+                Access your useForm methods and properties from nested
+                components, using React context. Great for building larger forms
+                and shared components!
               </p>
               <Link
                 to="/api/useformcontext"
@@ -141,7 +143,7 @@ export default function ApiGallery({ defaultLang }) {
                 <code>{`</>`}</code>useWatch
               </h3>
               <p>
-                Subscribe to individual form input change without impacting the
+                Subscribe to individual form input changes without impacting the
                 root component's render.
               </p>
               <Link to="/api/usewatch" aria-label={"read more about usewatch"}>
@@ -155,8 +157,8 @@ export default function ApiGallery({ defaultLang }) {
                 <code>{`</>`}</code>useFormState
               </h3>
               <p>
-                Subscribe to individual form state update and isolate re-render
-                at the hook level.
+                Subscribe to individual form state updates and isolating
+                re-renders at the hook level.
               </p>
               <Link
                 to="/api/useformstate"
@@ -172,8 +174,8 @@ export default function ApiGallery({ defaultLang }) {
                 <code>{`</>`}</code>useFieldArray
               </h3>
               <p>
-                Manage dynamically generate fields on the fly, shuffle, remove
-                and append fields.
+                Manage dynamically generated fields on the fly, shuffle, remove
+                and append fields. Ideal for complex CRUD data entry scenarios.
               </p>
               <Link
                 to="/api/usefieldarray"

src/data/home.tsx

@@ -319,9 +319,9 @@ export default {
       title: "Less code. More performant",
       description: (
         <p id="codeComparison" className={typographyStyles.homeParagraph}>
-          Reducing the amount of code you need to write, and removing
-          unnecessary re-renders are some of the primary goals of React Hook
-          Form. Now dive in and explore with the following example:
+          React Hook Form reduces the amount of code you need to write while
+          removing unnecssary re-renders. Now dive in and explore with the
+          following example:
         </p>
       ),
     },
@@ -431,9 +431,9 @@ export default {
       description: (
         <>
           <p className={typographyStyles.homeParagraph}>
-            You have the ability to isolate components re-renders which leads to
+            You have the ability to isolate component re-renders which leads to
             better performance on your page or app. The following example
-            demonstrates this.
+            demonstrates this:
           </p>
         </>
       ),
@@ -524,9 +524,9 @@ export default {
       description: (
         <>
           <p>
-            You have the ability to isolate components re-renders which lead to
-            less performance impact on your page or app. The following example
-            demonstrate such behaviour.
+            You have the ability to isolate component re-renders which leads to
+            better performance impact on your page or app. The following example
+            demonstrates this:
           </p>
 
           <p style={{ fontSize: 14 }}>
@@ -691,7 +691,7 @@ export default {
       description: (
         <p className={typographyStyles.homeParagraph}>
           The following screenshots demonstrate how much faster component
-          mounting is with React Hook Form compare with others.
+          mounting is with React Hook Form compared to others:
         </p>
       ),
       totalMount: "No. of mount(s)",