testing use ref

Author: erickcm2k

.DS_Store

@@ -1 +1 @@
-[{"/Users/erick/Documents/repositoriosGithub/reactJS/playground/p1-playground/src/reportWebVitals.js":"1","/Users/erick/Documents/repositoriosGithub/reactJS/playground/p1-playground/src/App.js":"2","/Users/erick/Documents/repositoriosGithub/reactJS/playground/p1-playground/src/index.js":"3","/Users/erick/Documents/repositoriosGithub/reactJS/playground/p1-playground/src/Components/State&Effect/State&Effect.js":"4","/Users/erick/Documents/repositoriosGithub/reactJS/playground/p1-playground/src/Components/ContextExample/FunctionExample.js":"5","/Users/erick/Documents/repositoriosGithub/reactJS/playground/p1-playground/src/Components/ContextExample/ClassExample.js":"6","/Users/erick/Documents/repositoriosGithub/reactJS/playground/p1-playground/src/Components/ContextExample/ContextExample.js":"7","/Users/erick/Documents/repositoriosGithub/reactJS/playground/p1-playground/src/Components/ContextExample/ThemeContext.js":"8","/Users/erick/Documents/repositoriosGithub/reactJS/playground/p1-playground/src/Components/LanguageContext/LanguageContext.js":"9","/Users/erick/Documents/repositoriosGithub/reactJS/playground/p1-playground/src/Components/LanguageContext/Functional.js":"10"},{"size":362,"mtime":1606591730051,"results":"11","hashOfConfig":"12"},{"size":393,"mtime":1606697373294,"results":"13","hashOfConfig":"12"},{"size":500,"mtime":1606591730050,"results":"14","hashOfConfig":"12"},{"size":683,"mtime":1606683398069,"results":"15","hashOfConfig":"12"},{"size":557,"mtime":1606695677381,"results":"16","hashOfConfig":"12"},{"size":538,"mtime":1606685311789,"results":"17","hashOfConfig":"12"},{"size":291,"mtime":1606688360863,"results":"18","hashOfConfig":"12"},{"size":700,"mtime":1606694322341,"results":"19","hashOfConfig":"12"},{"size":748,"mtime":1606696241569,"results":"20","hashOfConfig":"12"},{"size":631,"mtime":1606696239209,"results":"21","hashOfConfig":"12"},{"filePath":"22","messages":"23","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"1cpnh77",{"filePath":"24","messages":"25","errorCount":0,"warningCount":2,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"26","messages":"27","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"28","messages":"29","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"30","messages":"31","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"32","messages":"33","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"34","messages":"35","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"36","messages":"37","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"38","messages":"39","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"40","messages":"41","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"/Users/erick/Documents/repositoriosGithub/reactJS/playground/p1-playground/src/reportWebVitals.js",[],"/Users/erick/Documents/repositoriosGithub/reactJS/playground/p1-playground/src/App.js",["42","43"],"/Users/erick/Documents/repositoriosGithub/reactJS/playground/p1-playground/src/index.js",[],"/Users/erick/Documents/repositoriosGithub/reactJS/playground/p1-playground/src/Components/State&Effect/State&Effect.js",["44"],"/Users/erick/Documents/repositoriosGithub/reactJS/playground/p1-playground/src/Components/ContextExample/FunctionExample.js",[],"/Users/erick/Documents/repositoriosGithub/reactJS/playground/p1-playground/src/Components/ContextExample/ClassExample.js",[],"/Users/erick/Documents/repositoriosGithub/reactJS/playground/p1-playground/src/Components/ContextExample/ContextExample.js",[],"/Users/erick/Documents/repositoriosGithub/reactJS/playground/p1-playground/src/Components/ContextExample/ThemeContext.js",[],"/Users/erick/Documents/repositoriosGithub/reactJS/playground/p1-playground/src/Components/LanguageContext/LanguageContext.js",[],"/Users/erick/Documents/repositoriosGithub/reactJS/playground/p1-playground/src/Components/LanguageContext/Functional.js",[],{"ruleId":"45","severity":1,"message":"46","line":1,"column":8,"nodeType":"47","messageId":"48","endLine":1,"endColumn":19},{"ruleId":"45","severity":1,"message":"49","line":2,"column":8,"nodeType":"47","messageId":"48","endLine":2,"endColumn":22},{"ruleId":"50","severity":1,"message":"51","line":12,"column":6,"nodeType":"52","endLine":12,"endColumn":13,"suggestions":"53"},"no-unused-vars","'StateEffect' is defined but never used.","Identifier","unusedVar","'ContextExample' is defined but never used.","react-hooks/exhaustive-deps","React Hook useEffect has missing dependencies: 'duplicateCount' and 'printAt10'. Either include them or remove the dependency array.","ArrayExpression",["54"],{"desc":"55","fix":"56"},"Update the dependencies array to be: [count, duplicateCount, printAt10]",{"range":"57","text":"58"},[259,266],"[count, duplicateCount, printAt10]"]
+[{"/Users/erick/Documents/repositoriosGithub/reactJS/playground/p1-playground/src/reportWebVitals.js":"1","/Users/erick/Documents/repositoriosGithub/reactJS/playground/p1-playground/src/App.js":"2","/Users/erick/Documents/repositoriosGithub/reactJS/playground/p1-playground/src/index.js":"3","/Users/erick/Documents/repositoriosGithub/reactJS/playground/p1-playground/src/Components/State&Effect/State&Effect.js":"4","/Users/erick/Documents/repositoriosGithub/reactJS/playground/p1-playground/src/Components/ContextExample/FunctionExample.js":"5","/Users/erick/Documents/repositoriosGithub/reactJS/playground/p1-playground/src/Components/ContextExample/ClassExample.js":"6","/Users/erick/Documents/repositoriosGithub/reactJS/playground/p1-playground/src/Components/ContextExample/ContextExample.js":"7","/Users/erick/Documents/repositoriosGithub/reactJS/playground/p1-playground/src/Components/ContextExample/ThemeContext.js":"8","/Users/erick/Documents/repositoriosGithub/reactJS/playground/p1-playground/src/Components/LanguageContext/LanguageContext.js":"9","/Users/erick/Documents/repositoriosGithub/reactJS/playground/p1-playground/src/Components/LanguageContext/Functional.js":"10","/Users/erick/Documents/repositoriosGithub/reactJS/playground/p1-playground/src/Components/Useref-test/UserefTest.js":"11"},{"size":362,"mtime":1606591730051,"results":"12","hashOfConfig":"13"},{"size":416,"mtime":1606781900557,"results":"14","hashOfConfig":"13"},{"size":500,"mtime":1606591730050,"results":"15","hashOfConfig":"13"},{"size":683,"mtime":1606683398069,"results":"16","hashOfConfig":"13"},{"size":557,"mtime":1606695677381,"results":"17","hashOfConfig":"13"},{"size":538,"mtime":1606685311789,"results":"18","hashOfConfig":"13"},{"size":291,"mtime":1606688360863,"results":"19","hashOfConfig":"13"},{"size":700,"mtime":1606694322341,"results":"20","hashOfConfig":"13"},{"size":748,"mtime":1606696241569,"results":"21","hashOfConfig":"13"},{"size":631,"mtime":1606696239209,"results":"22","hashOfConfig":"13"},{"size":1139,"mtime":1606787393253,"results":"23","hashOfConfig":"13"},{"filePath":"24","messages":"25","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"1cpnh77",{"filePath":"26","messages":"27","errorCount":0,"warningCount":3,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"28","messages":"29","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"30","messages":"31","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"32","messages":"33","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"34","messages":"35","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"36","messages":"37","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"38","messages":"39","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"40","messages":"41","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"42","messages":"43","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"44","messages":"45","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"/Users/erick/Documents/repositoriosGithub/reactJS/playground/p1-playground/src/reportWebVitals.js",[],"/Users/erick/Documents/repositoriosGithub/reactJS/playground/p1-playground/src/App.js",["46","47","48"],"/Users/erick/Documents/repositoriosGithub/reactJS/playground/p1-playground/src/index.js",[],"/Users/erick/Documents/repositoriosGithub/reactJS/playground/p1-playground/src/Components/State&Effect/State&Effect.js",["49"],"/Users/erick/Documents/repositoriosGithub/reactJS/playground/p1-playground/src/Components/ContextExample/FunctionExample.js",[],"/Users/erick/Documents/repositoriosGithub/reactJS/playground/p1-playground/src/Components/ContextExample/ClassExample.js",[],"/Users/erick/Documents/repositoriosGithub/reactJS/playground/p1-playground/src/Components/ContextExample/ContextExample.js",[],"/Users/erick/Documents/repositoriosGithub/reactJS/playground/p1-playground/src/Components/ContextExample/ThemeContext.js",[],"/Users/erick/Documents/repositoriosGithub/reactJS/playground/p1-playground/src/Components/LanguageContext/LanguageContext.js",[],"/Users/erick/Documents/repositoriosGithub/reactJS/playground/p1-playground/src/Components/LanguageContext/Functional.js",[],"/Users/erick/Documents/repositoriosGithub/reactJS/playground/p1-playground/src/Components/Useref-test/UserefTest.js",[],{"ruleId":"50","severity":1,"message":"51","line":1,"column":8,"nodeType":"52","messageId":"53","endLine":1,"endColumn":19},{"ruleId":"50","severity":1,"message":"54","line":2,"column":8,"nodeType":"52","messageId":"53","endLine":2,"endColumn":22},{"ruleId":"50","severity":1,"message":"55","line":3,"column":8,"nodeType":"52","messageId":"53","endLine":3,"endColumn":23},{"ruleId":"56","severity":1,"message":"57","line":12,"column":6,"nodeType":"58","endLine":12,"endColumn":13,"suggestions":"59"},"no-unused-vars","'StateEffect' is defined but never used.","Identifier","unusedVar","'ContextExample' is defined but never used.","'LanguageExample' is defined but never used.","react-hooks/exhaustive-deps","React Hook useEffect has missing dependencies: 'duplicateCount' and 'printAt10'. Either include them or remove the dependency array.","ArrayExpression",["60"],{"desc":"61","fix":"62"},"Update the dependencies array to be: [count, duplicateCount, printAt10]",{"range":"63","text":"64"},[259,266],"[count, duplicateCount, printAt10]"]

playground/.DS_Store

@@ -1,13 +1,13 @@
 import StateEffect from "./Components/State&Effect/State&Effect";
 import ContextExample from "./Components/ContextExample/ContextExample";
 import LanguageExample from "./Components/LanguageContext/Example";
+import UserefTest from "./Components/Useref-test/UserefTest";
 import React from "react";
 
 function App() {
   return (
     <React.Fragment>
-      {/* <ContextExample /> */}
-      <LanguageExample />
+      <UserefTest/>
     </React.Fragment>
   );
 }

playground/p1-playground/.eslintcache

@@ -0,0 +1,45 @@
+import React, { useRef, useState, useEffect } from "react";
+
+const UserefTest = () => {
+  const [name, setName] = useState("");
+  //   const [renderCount, setRenderCount] = useState(0);
+
+  //   const updateAndRerender = (e) => {
+  //     setName(e.target.value);
+  //     setRenderCount(renderCount + 1);
+  //   };
+
+  const renderCount = useRef(0);
+  const inputRef = useRef();
+
+  useEffect(() => {
+    // This way useRef prevents the component to rerender with each update
+    renderCount.current = renderCount.current + 1;
+  });
+
+  const focus = () => {
+    console.log(inputRef);
+    inputRef.current.focus();
+  };
+  const blur = () => {
+    console.log(inputRef);
+    inputRef.current.blur();
+  };
+
+  return (
+    <React.Fragment>
+      <input
+        ref={inputRef}
+        type="text"
+        placeholder="start typing"
+        onChange={(e) => setName(e.target.value)}
+      ></input>
+      <div>My name is {name}</div>
+      <div>I've been rerendered {renderCount.current} times</div>
+      <button onClick={focus}>Focus</button>
+      <button onClick={blur}>Blur</button>
+    </React.Fragment>
+  );
+};
+
+export default UserefTest;