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 @typescript

TypeScript 4.7 beta is out to try with lots of new features and improvements around type inference, narrowing analyses, ES module integration, and more! Announcing TypeScript 4.7 BetaToday we are excited to announce the beta release of TypeScript 4.7! To get started using the beta, you can use npm with the following command: npm install typescript@beta You can also get editor support by Downloading for Visual Studio 2022/2019 Following directions for Visual Studio Code and Subl…devblogs.microsoft.com

April 8th 2022

182 Retweets715 Likes

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 @astrodotbuild

📡 Houston, we have a release! 🚀 The Astro v1.0 Beta is now available 🚀 > npm init astro astro.build/blog/astro-1-b…

April 4th 2022

89 Retweets385 Likes

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.

React @reactjs

The React 18 TypeScript typings are out! As with most major releases, they include breaking changes to the types themselves. You can learn more about them here: [react] React 18 types by eps1lon · Pull Request #56210 · DefinitelyTyped/DefinitelyTypedOverwhelmed by compile errors after upgrading to @types/react@^18.0.0? Check out https://github.com/eps1lon/types-react-codemod Breaking Changes Removal of implicit children For components that do ...github.com

April 8th 2022

188 Retweets790 Likes

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

1. 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.

2. 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 */}
   </>

3. 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

• An Overlooked Factor For Performance Optimization In React

• How to easily reduce your NextJS bundle size by 30%?

🎨 CSS

• Designing A Better Carousel UX

• Exciting Times for Browsers (and CSS)

🔧 Other

• Server-Side Rendering with Astro

• What is the deal with Environment Variables in a Front-End Application?

• How to Write Good API Documentation

• What's New In DevTools (Chrome 101)