Relatable Code

Share this post
Looking at some common React Interview questions and the announcement of Typescript 4.7 Beta
relatablecode.substack.com

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

Diego Ballesteros
Apr 15
Comment
Share

šŸ—ž News

Twitter avatar for @typescriptTypeScript @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.

Twitter avatar for @astrodotbuildAstro @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.

Twitter avatar for @reactjsReact @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)

r/ProgrammerHumor - Hey, where are you going?!
CommentComment
ShareShare

Create your profile

0 subscriptions will be displayed on your profile (edit)

Skip for now

Only paid subscribers can comment on this post

Already a paid subscriber? Sign in

Check your email

For your security, we need to re-authenticate you.

Click the link we sent to , or click here to sign in.

TopNew

No posts

Ready for more?

Ā© 2022 Diego Ballesteros
Privacy āˆ™ Terms āˆ™ Collection notice
Publish on Substack Get the app
SubstackĀ is the home for great writing