Looking at some common React Interview questions and the announcement of Typescript 4.7 Beta
I decided to revisit some common React Interviewing questions and how I would answer them. Typescript's 4.7 Beta has been released with a long awaited feature for ESModules
🗞 News
Typescript has added support for ES modules. This is pretty forward-facing as more of the industry is giving the same type of support.
Astro a terrific server-side rendering framework has reached its official v1.0 beta. As per their docs, this is geared towards static sites and is compatible with whichever framework you decide to bring.
I mentioned last week that React came out with its new version (18). However, this has resulted in a ton of issues with TypeScript. Thankfully a codemod has been released to help out.
💡 Learning
What is React? Why use it?
React is a UI library. Most seem to think it’s a framework, this is incorrect! There are frameworks that use React for their UI such as Remix, NextJS, or Redwood.
As for the why. As it is a UI library it allows us to easily create reactive and reuseable components for our user interface. Due to its time and widespread adaption it also has a large ecosystem to help us out.What are React Fragments? And what are they used for?
When you render a React component it always expects a singular node at the top. React fragments allow you to group up different elements or components in a singular “node” without actually creating it in the DOM
For example:<React.Fragment> <div>First Element</div> <div>Second Element</div> </React.Fragment> // or <> {*/ Other elements */} </>What is the useEffect hook? What is it used for?
The useEffect hook is in charge of performing side effects. But what does this mean?
Whenever a component in React is rendered it goes through a lifecycle. The useEffect can hook into this lifecycle (Mounting, Updating, and Unmounting) and execute different operations.
This is most commonly used to interact with API calls as it is an asynchronous action.Bonus points if you delve into the dependency array of a useEffect hook. If a value in the dependency array changes then the useEffect hook will run. A useEffect hook with no dependency array will run every update. A useEffect hook with an empty dependency array will only run once.
📦 Additional Resources
⚛ React
🎨 CSS
🔧 Other
