{"componentChunkName":"component---src-templates-blog-post-js","path":"/react/practical-interview-questions/","result":{"data":{"site":{"siteMetadata":{"title":"Recipes Collection","author":"Internet Community"}},"markdownRemark":{"id":"d26df219-3a4d-5761-8f23-2f7d9b58e3a1","html":"\n

Practical Interview Questions

\n

Q - Write code using a ref hook to toggle the case of input text to uppercase and lower case upon clicking a button.

\n
import { useRef, useState } from \"react\";\nimport \"./App.css\";\n\nfunction App() {\n  const inputField = useRef(null);\n\n  const [textCase, setTextCase] = useState(\"lowercase\");\n\n  const toggleInputCase = () => {\n    const currentValue = inputField.current.value;\n    if (textCase === \"lowercase\") {\n      inputField.current.value = currentValue.toUpperCase();\n      setTextCase(\"uppercase\");\n    } else {\n      inputField.current.value = currentValue.toLowerCase();\n      setTextCase(\"lowercase\");\n    }\n  };\n\n  return (\n    <div>\n      <input type=\"text\" ref={inputField} />\n      <button type=\"button\" onClick={toggleInputCase}>\n        Toggle Case\n      </button>\n    </div>\n  );\n}\n\nexport default App;
\n

Q - Say if you have a child component which is having a deep tree itself. If we want to prevent unnecessary rerendering for that component, how could we achieve that?

\n

shouldComponentUpdate method in class based components\nReact.memo in functional components

\n

Q - Say I need to derive a value for a variable by doing expensive computation, and I need to show this variable value in the component. Is there any way that I could only do this computation once and use it with next rerenders?

\n

useMemo hook

\n

Q - Say if I want to load a particualr page component related JavaScript code on demand. Perhaps when user is navigating to that page itself. How would I do that?

\n

React.lazy

\n

Q - Say I want to show a counter value in the screen and this value should be incremented every second. And upon clicking a button, you want to stop this counter getting incremented automatically. How would you do this?

\n","timeToRead":3,"frontmatter":{"title":"Pracical Interview Questions","date":"April 24, 2022","spoiler":"Following are some notes collected through internet"},"fields":{"slug":"/react/practical-interview-questions/","langKey":"en"}}},"pageContext":{"slug":"/react/practical-interview-questions/","previous":{"fields":{"slug":"/react/react-architecture/","langKey":"en","directoryName":"react-architecture","maybeAbsoluteLinks":[]},"frontmatter":{"title":"React Architecuture"}},"next":{"fields":{"slug":"/react/concurrent-mode-and-suspense/","langKey":"en","directoryName":"concurrent-mode-and-suspense","maybeAbsoluteLinks":[]},"frontmatter":{"title":"Concurrent Mode and Suspense"}},"translations":[],"translatedLinks":[]}}}