execute-child-function-from-parent

Author: rohan-paul

React/refs-in-react/execute-child-function-from-parent.md

@@ -0,0 +1,69 @@
+A full example
+[Source](https://stackblitz.com/edit/react-a1mlqw?file=index.js)
+
+```js
+import React, { Component, useRef, useImperativeHandle } from "react"
+import { render } from "react-dom"
+import Hello from "./Hello"
+import "./style.css"
+
+class App extends Component {
+  constructor() {
+    super()
+    this.state = {
+      name: "React",
+    }
+  }
+
+  render() {
+    return (
+      <div>
+        <Hello name={this.state.name} />
+        <p>Start editing to see some magic happen :)</p>
+        <Parent />
+      </div>
+    )
+  }
+}
+
+function Parent(props) {
+  const refs = useRef([])
+  const someData = [1, 2, 3, 4, 5]
+
+  function validateChildren() {
+    refs.current.forEach(child => {
+      // in below the validate() function comes from Child comp and will be available to parent component using ref
+      child.validate()
+    })
+  }
+
+  return (
+    <>
+      <button onClick={validateChildren}>Validate</button>
+      {someData.map((data, index) => {
+        return <Child key={index} ref={ins => (refs.current[index] = ins)} />
+      })}
+    </>
+  )
+}
+
+const Child = React.forwardRef((props, ref) => {
+  useImperativeHandle(ref, () => ({
+    validate() {
+      // to validate this component
+      console.log("I'm clicked")
+    },
+  }))
+
+  return <>Some code here</>
+})
+
+render(<App />, document.getElementById("root"))
+```
+
+From the docs,
+
+useImperativeHandle customizes the instance value that is exposed to parent components when using ref. As always, imperative code using refs should be avoided in most cases. useImperativeHandle should be used with forwardRef
+
+**Another example of passing ref further down Parent > Middle > Child want to call a method from Child in Parent**
+[https://stackoverflow.com/questions/57389181/unable-to-call-child-function-from-parent-using-refs-with-functional-component](https://stackoverflow.com/questions/57389181/unable-to-call-child-function-from-parent-using-refs-with-functional-component)

React/refs-in-react/refs-in-React.md

@@ -130,6 +130,17 @@ The short answer is that most of the time you can safely use the createRef API.
 
 **Note, You can't use createRef for pure functional components since they lack many of the React-y features like state & lifecycle components**
 
+#### Finally, as a rule of thumb:
+
+- Don’t overuse refs
+- Abolish string refs
+- Use callback refs when you have to dynamically set them
+- When in a class component, use createRef in all other cases
+- When in a function component, use useRef in all other cases
+- Use forwardRef when you need access to a child ref
+- Use Hooks to empower your function component
+- If the child ref must not be a function component, then use a custom method to trigger focus programmatically from the parent (remember you will get a component instance, not a DOM element)
+
 #### Further Reading
 
 [https://moduscreate.com/blog/everything-you-need-to-know-about-refs-in-react/](https://moduscreate.com/blog/everything-you-need-to-know-about-refs-in-react/)