DEV Community: Let's Code

Free Online Storybook Conference 2023 ️‍🔥

Let's Code — Wed, 08 Feb 2023 23:52:29 +0000

On March 14, 2023, Storybook will host their very first conference 🥳 and this is exciting because you can learn timesaving workflows 💪 and get an overview of trending projects in the storybook community.

They will announce and discuss their latest version 7. This version is their first version in two years which the team have rearchitected for speed 🏃, performance ⌛, and stability 👍.

Some of the exciting changes are the following:

💅 Design refresh
🏎️ Performance overhaul
📝 Docs revamp with MDX 2
🕹️ Interaction testing
🚥 Test runner powered by Jest
📈 Test coverage to generate lcov reports
🧩 Framework API for zero-config
🔖 Component Story Format 3.0 is default
⚡ Vite support (supports latest version v4)
✅ TypeScript just works (supports latest version 4.9)
🎨 Figma integration sneak peek
▲ NextJS auto-config
🦾 SvelteKit auto-config

There are hundreds more improvements other than these and you can check them out here if you have the time.

What is Storybook?

If you do you not know what Storybook is this is a tool to help you build UI components and pages in isolation. This gives you the power not to worry about data 🗂️, APIs or any business logic and as a developer you would know how this might be tricky or difficult this is to setup.

Who uses Storybook?

Thousands of teams already uses Storybook for development, testing, and documentation which includes big and leading companies like Github, Microsoft, Adobe, Wordpress and along with others and this list is expected to eventually grow more in the future.

How to sign up?

You can sign up now and get your ticket to join the online conference. The best thing of this all is that it is free. Here is the (link)[https://storybook.js.org/day]. All that is required is to drop an email 📧 and you are in.   

I hope to see you on the event. 👋

Here is the video version if it is a medium of your preference:

Check out my other popular blog post:

10 ReactJS Coding Challenge

ReactJS Tic-Tac-Toe (💥Passed Job Interview💥)

JavaScript Interview Questions and Answers you should know - Junior and Senior

CSS Interview Question: Center HTML Element (3 Approaches💥)

Let's Code — Tue, 19 Apr 2022 15:07:29 +0000

You get asked a question ❓ or is challenged to write code to

Center a div vertically and horizontally OR How to perfectly center an element in a browser?

How would you answer? 🤔 Below are three possible ways to do it. My recommendation all the way below. Given HTML markup that looks like below:

<div class="parent">
  <div class="child"></div>
</div>

Approach #1: CSS Translate/Transform
This is an approach that have a better browser 🌏 support than both CSS Flexbox and Grid. Code may look like below.

.parent {
  position: relative;
}

.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Codepen: https://codepen.io/angelo_jin/pen/popONyX

Note: All implementation will look like below

Approach #2: CSS Flexbox
This solution have a better browser support than css grid and ideal for those browsers can support the feature. It is great for creating 1 dimension layout which aims at providing a more efficient way to align and distribute space among items in a container. Can even center when their size is unknown and/or dynamic. 😲

.parent {
  display: flex;
  align-items: center;
  justify-content: center;
}

Codepen: https://codepen.io/angelo_jin/pen/QWaVGGP

Approach #3: CSS Grid
This ruleset is ideal because we are not on the 90's anymore, few lines of style we have to add that completely changes the way we design user interface.😊 CSS Grid Layout excels at dividing a page into major regions or defining the relationship in terms of size, position, and layer, between parts of a control built from HTML primitives.

If you are going to use this on your interview, mention that you would use this solution if browser can support it. This would show that you are paying attention with the latest and greatest css specs and is not tied up with the old way of doing things.

// CSS Grid
.parent {
  display: grid;
  place-items: center;
}

Codepen: https://codepen.io/angelo_jin/pen/qBpMqRr

Below is for medium for those who like video format:

Codepen Center Element Collection: https://codepen.io/collection/MgJxRk
(Great idea to bookmark for future use)

A great front-end engineer focus his attention equally on CSS and JS, be well-rounded, and doesn't concentrate on one technology. For my recommendation on this question, I would use CSS Grid if browser is capable of supporting. If not, resort to CSS Flexbox then, CSS Translate would be the last choice.

CSS Interview Question: Create Responsive Design (1 Column / 3 Column)

Let's Code — Mon, 11 Apr 2022 23:49:04 +0000

I went on numerous job hunting 💼 this year and noticed that most of the interview questions revolve around javascript and it is totally understandable.😞 No CSS/HTML.

Those other interviews that contain CSS technical questions 🤔, I was asked to write a responsive layout - 1 column for small screens and 3 columns for wider screens.

Just like any given problems, there are many solutions to this question. Hopefully, you do not present the old way of doing things which is to use table, or float like below 🚫.

// CSS Float
@media (min-width: 500px) {
  .column {
    width: 33.33%;
    float: left;
  }
}

My recommendation would be either css flexbox or grid which would like below.

// CSS Flexbox
@media (min-width: 500px) {
  .columns { // parent
    display: flex;
  }
  .column { // child
    flex: 1;
  }
}

// CSS Grid
@media (min-width: 500px) {
  .columns { // parent
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
}

CSS is a skill that needed by every front-end developer/engineer although it is not the favorite skill. One should be able to write elegant and minimal CSS rules.

What is your take on this? Should CSS questions or challenges still be asked on a front end interview or we can assume that engineer should know it as it is not a programming language?

Codepen: https://codepen.io/collection/pgbEQM (If you want to play around these three approaches)

For those who prefers video format

ReactJS Tic-Tac-Toe (💥Passed Job Interview💥)

Let's Code — Sat, 19 Feb 2022 16:53:51 +0000

Hello Everyone! I wanted to share my success on my previous job interview where I was asked to code a tic-tac-toe game in ReactJS and was able to pull it off landing a job offer. 🎉🥳 This is not the first time I was asked to code this game 🎮 but on different interviews as well. Other interviews was in plain vanilla JS.

My recommended approach to solving this challenge is list 📙 the steps of how would you solve it (just like the video I have below) then code those step one by one. You will get credit 💯 even if you don't finish the game. In case you do not finish the challenge, just talk about how would you code the rest of the steps and you will most likely still be successful in the interview.

Here is how I did it. I created two 2️⃣ components - Square and Board Component and a Helper Function to calculate the winner.

Square Component

function Square({ onClick, value }) {
  return (
    <button className="square" onClick={onClick}>
      {value}
    </button>
  );
}

Board Component

function Board () {
  const [squares, setSquares] = React.useState(Array(9).fill(null))
  const [isX, setIsX] = React.useState(true);

  const handleClick = (i) => {
    if (calculateWinner(squares) || squares[i]) {
      return
    }

    squares[i] = isX ? 'X' : 'O'
    setSquares(squares)
    setIsX(!isX)
  }

  const winner = calculateWinner(squares)
  let status

  if (winner) {
    status = `Winner: ${winner}`;
  } else {
    status = 'Next player: ' + (isX ? 'X' : 'O');
  }

  const handleRestart = () => {
    setIsX(true)
    setSquares(Array(9).fill(null))
  }

  const renderSquare = (i) => {
    return <Square value={squares[i]} onClick={() => handleClick(i)} />
  }

  return (
    <div className="board">
      <div className="board-row">
        {renderSquare(0)}
        {renderSquare(1)}
        {renderSquare(2)}
      </div>
      <div className="board-row">
        {renderSquare(3)}
        {renderSquare(4)}
        {renderSquare(5)}
      </div>
      <div className="board-row">
        {renderSquare(6)}
        {renderSquare(7)}
        {renderSquare(8)}
      </div>
      <div className="status">{status}</div>
      <button className="restart" onClick={handleRestart}>Restart Game!</button>
    </div>
  )
}

Helper Function To Calculate A Winner

function calculateWinner(squares) {
  const winningPatterns = [
    [0, 1, 2],
    [3, 4, 5],
    [6, 7, 8],
    [0, 3, 6],
    [1, 4, 7],
    [2, 5, 8],
    [0, 4, 8],
    [2, 4, 6],
  ]

  for (let i = 0; i < winningPatterns.length; i++) {
    const [a, b, c] = winningPatterns[i];
    if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) {
      return squares[a];
    }
  }
  return null;
}

Below are some codepen links if you want to play around my solution. Also, a link to the exercise to avoid the setup and if you want to try it yourself.

Tic-Tac-Toe Codepen Solution
Tic-Tac-Toe Codepen Exercise

Final Thoughts:
This interview challenge is tough but can be fun. It would refresh your knowledge with ReactJS concepts and fundamentals. It might even help you land your dream job if you get asked to do this challenge so it is a win-win and may be valuable to you.

Feel free to bookmark 🔖 even if you don't need this for now. You may need to refresh/review down the road when it is time for you to look for a new role.

Listing a collection of my previous ReactJS post if you need some help with a potential interview with this library.

Common React Interview Questions

Advance React Interview Questions

10 ReactJS Coding Challenge (💥Coding Interview Prep💥)

(I created a 7-minutes video that is fast and painless to explain details step-by-step as I see other tutorials that is 20 minutes to 1 hour long which can be greatly condensed into something way smaller)

JS Coding Question #11: Are Two Object Equal (💥3 Solutions💥)

Let's Code — Fri, 21 Jan 2022 06:59:54 +0000

...And the series continues after couple of React Interview Questions and Coding articles. 👍

Now, this interview question can be tricky as you would need to know how to recurse in order to solve this problem/challenge. Even seasoned engineers often stumble to answer this question so better not to underestimate this problem but be ready. Video format is available below if you don't feel like reading. Here is a Codepen if you want to edit/play around the code.

Interview Question #11:

Write a function or program that checks if two objects are equal.

There can be many solutions to problems/challenges that are efficient and less efficient, elegant and less elegant. If you have any other than the 3 solutions I have, please share so others may benefit. Below is my 3 solutions.

Solution #1:

JSON.stringify

const sortString = (str) => str.split("").sort().join("")

function isEqual(obj1, obj2) {
  const a = JSON.stringify(obj1);
  const b = JSON.stringify(obj2);

  // sort so it will handle object properties that are not in order
  return sortString(a) === sortString(b)
}

This is an approach that looks very dirty/hacky but may still be useful if one is comparing smaller objects. It is easy and fast to write and do not need any libraries which adds overhead to the final js bundle. Since this is fast to write, it may also be useful for quick sanity check or verifying if two objects are equal.

Solution #2:

Using a lib

function lodashEqual(obj1, obj2) {
  return _.isEqual(obj1, obj2);
}

Most codebases have js utility already. What I like about libraries are that they solve common problems effectively and are well-tested to cover edge cases. I love open source libs and I am firm believer not to reinvent the wheel for problems that are already been solved.

Solution #3:

Custom Approach

function deepEqual(obj1, obj2) {
  // ensure that arguments are objects
  return obj1 && obj2 && typeof obj1 === "object" && typeof obj2 === "object"
    ? // return false right away if objects properties length are not equal
      Object.keys(obj1).length === Object.keys(obj2).length &&
        // use reduce setting the initial value to equal which is true
        Object.keys(obj1).reduce((prev, curr) => {
          // then recurse as deep as possible and keep recursing if values are objects
          return prev && deepEqual(obj1[curr], obj2[curr]);
        }, true)
    : // just do normal compare if not an object
      obj1 === obj2;
}

This custom approach requires recursion to be able to compare nested, deep objects. Many interviewers would want to see interviewees show/draft their own solution as they want to see how they communicate, think and code at the same time.

Final Thoughts:

If I am interviewing someone and they can tell me that solution maybe using a libraries AND sudo code a custom solution trying to recurse through it, I would be satisfied with those answer. How about you? What are your thoughts?

Feel free to bookmark 🔖 even if you don't need this for now. You may need to refresh/review down the road when it is time for you to look for a new role.

10 ReactJS Coding Challenge (💥Coding Interview Prep💥)

Let's Code — Wed, 05 Jan 2022 00:20:37 +0000

Last month, I posted 2 ReactJS interview questions 🎤 - Advance Questions and Commonly Asked Question and got a significant welcome by dev.to community. 🤗 🥰 Many thanks to all of you!

I decided to complete the package by creating codepen exercises 📝 and a video 📺 to follow up on that effort as one will need to code following the technical interview questions. Also, I added potential solutions for the exercises which is listed below.

If you need to brush up 🆙 your ninja ReactJS skills, you can try to answer the exercises below OR click the video below to guide you step-by-step interactively. (No filler, fast, straight to the point as I highly respect/value your time)

These exercises and solutions will also be available on the video as well.

Exercises: 🏋️

Solutions: 🙋

Display simple JSX

https://codepen.io/angelo_jin/pen/xxXrZLd

Display array of users to browser

https://codepen.io/angelo_jin/pen/wvreMpZ

Show/Hide Element on Screen

https://codepen.io/angelo_jin/pen/abLwyrL

2 way data binding in ReactJS

https://codepen.io/angelo_jin/pen/yLzvMop

Disable a button

https://codepen.io/angelo_jin/pen/dyVmyYz

Update the parent state

https://codepen.io/angelo_jin/pen/KKXoKgO

Dynamically add child components (React Children)

https://codepen.io/angelo_jin/pen/MWEVJNb

Sum of Two Numbers

https://codepen.io/angelo_jin/pen/BawrWzy

Create Counter App 🕒

https://codepen.io/angelo_jin/pen/yLzKMXX

Fetch data from an API

https://codepen.io/angelo_jin/pen/zYEWZdW

Happy coding and good luck on your next interview! I hope this material will help you land your next dream job. 💰 🚗 📈

Time for a job change? 🤔

Let's Code — Thu, 30 Dec 2021 00:46:12 +0000

Prices 💲 and services everywhere are continuing to soar 📈 at record levels AND the worth of money on our savings account is losing value over time. Although the yearly salary 💶 increase helps, it seems to be not enough.

The thought of a career 💼 switch definitely came to mind as it may bring at least extra 20% more compensation. It is understandable if this option doesn't apply to many as everybody's situation are different - one is happy and job hopping is a bit risky.

I am leaning on looking to better provide for my family. As a matter of fact I have couple of interviews lined up next week. What is your situation and are you considering it?

This resource might help you in case you need a refresher on interview.

Holidays are almost over 😭 Back to Reality 😱

Let's Code — Thu, 30 Dec 2021 00:25:08 +0000

While some of us might be back to work already after a glorious holiday, some of us will be back after the New Year's holiday and will face the inevitable. I am one of the latter and is definitely not quite ready yet.

I am curious on what did you do during the long holiday - either personal and professional wise. Below is my story.

Spent my leave on staycation. I hang out with the family and in-laws. Lots of shopping and ice skating.
Ate a bunch of unhealthy food I shouldn't be eating - more than what I imagined. Major diet after New Year to follow. 😊
Finally, wrote couple of ReactJS articles here at dev.to and created a video version that I am very proud of (still honing my video recording skills). Below are the links if you want to check it out.

Thanks for the dev.to community for a great, warm support of the articles.

Advance React Interview Questions
Basic React Interview Questions

So, that is my story. What is yours - No right/wrong answers.

React Interview Questions (Mid - Senior Level)

Let's Code — Sun, 26 Dec 2021 07:36:44 +0000

Here are some advance common React interview questions that may be asked on your next interview. Good luck if you are about to interview and I hope this material will help you.

What are React Hooks?

React Hooks are a new addition in React version 16.8. They let you use state and other React features without converting functional components to a class.

Hooks does the same job with less code and with less code means less chances of producing bugs.

Basic Hooks

useState

returns a stateful value, and a function to update it.

useEffect

lets us perform side effects in function components

useContext

gives a simple function to access the data via value prop of the Context Provider in any child component

Additional Hooks

useReducer

state management like redux for managing state in smaller applications rather than having to reach for a third-party state management library

useCallback

memoizes callback functions, so they not recreated on every re-render.

useMemo

stores the results of expensive operations

useRef

lets us perform side effects in function components

useImperativeHandle

Used together with forwardRef which allows you to modify the ref instance that is exposed from parent components

useLayoutEffect

this runs synchronously immediately after React has performed all DOM mutations

useDebugValue

allows you to display additional, helpful information next to your custom Hooks, with optional formatting.

What is context?

Context provides a way to pass data through component tree without having to pass props down manually at every level.

It is designed to share data that can be considered global for a tree of React components.

Note: Apply it sparingly because it makes component reuse more difficult. Consider component composition as it is often a simpler solution than context.

How to pass data between components?

To pass data from parent to child, use props
To pass data from child to parent, use callbacks
To pass data among siblings AND anywhere else
1. use React’s Context API also
2. use state management libraries for mid - big sized applications that are stateful. Example: Redux, MobX, and Recoil

What are some limitations of React.

First, JSX can make the coding complex. It will have a steep learning curve for the beginners

Second, React documentation is not user friendly and thorough as it should be.

Third, every React project are unique to engineers as they will rely on numerous technologies to incorporate in their projects.

What is prop drilling and how can you avoid it?

Prop Drilling is the process by which data is passed from one component to deeply nested components. This becomes a problem as other components will contain data that they don’t need.

Also, It will make the components hard to maintain.

A common approach to avoid prop drilling is to use React context and state management libraries.

Few disadvantage of prop drilling

Components that should not otherwise be aware of the data become unnecessarily complicated
Harder to maintain.

What is the use of dangerouslySetInnerHTML?

This property is React’s replacement for using innerHTML in the browser. It will render raw HTML in a component.

One should limit its use because it can expose users to potential cross-site scripting attacks.

Name a few techniques to optimize React app performance.

First, Use React.Suspense and React.Lazy for Lazy Loading Components. This will only load component when it is needed.

import LazyComponent from './LazyComponent';

const LazyComponent = React.lazy(() => import('./LazyComponent'));

Second, Use React.memo for Component Memoization
React.memo is a higher order component that will render the component and memoizes the result. Before the next render, if the new props are the same, React reuses the memoized result skipping the next rendering

import React from 'react';

const MyComponent = React.memo(props =>  {
  /* render only if the props changed */
});

Note: If React.memo has a useState, useReducer or useContext Hook in its implementation, it will still re-render when state or context change.

The more often the component renders with the same props,
the heavier and the more computationally expensive the output is, the more chances are that component needs to be wrapped in React.memo().

Third, Use React.Fragment to Avoid Adding Extra Nodes to the DOM React Fragments do not produce any extra elements in the DOM Fragment’s child components will be rendered without any wrapping DOM node.

This is a cleaner alternative rather than adding divs in the code.

function App() {
  return (
    <React.Fragment>
      <h1>Best App</h1>
      <p>Easy as pie!</p>
    </React.Fragment>
  );
}

You can also use the short syntax <></> for declaring a Fragment.

function App() {
  return (
    <>
      <h1>Best App</h1>
      <p>Easy as pie!</p>
    </>
  );
}

Fourth, Use Reselect / Re-reselect in Redux to Avoid Frequent Re-render.
Reselect is a library for building memoized selectors that is commonly used for redux.

Advantages

Selectors can compute derived data, allowing Redux to store the minimal possible state.
Selectors are efficient. A selector is not recomputed unless one of its arguments changes.
Selectors are composable. They can be used as input to other selectors.

Re-reselect is a lightweight wrapper around Reselect to enhance selectors with deeper memoization and cache management.

Useful to:

Retain selector's cache when sequentially called with one/few different arguments
Join similar selectors into one
Share selectors with props across multiple component instances
Instantiate selectors on runtime
Enhance reselect with custom caching strategies

Last, Use Production Build
Ensure that application is bundled for production before deploying.

What is reconciliation?

When a component's props or state change, React decides whether an actual DOM update is necessary by comparing the newly returned element with the previously rendered one. When they are not equal, React will update the DOM. This process is called reconciliation.

What are Higher-Order Components?

A higher-order component (HOC) is an advanced technique in React for reusing component logic. It is a function that takes a component and returns a new component.

const EnhancedComponent = higherOrderComponent(WrappedComponent);

HOCs are common in third-party React libraries, such as Redux’s connect and Relay’s createFragmentContainer.

HOC can be used for many use cases:

Conditionally rendering components.
Providing components with specific styles.
Give other components any props.
Showing a loader while a component waits for data

What is children prop?

It is a prop that allow us to pass components as data to other components, just like any other prop. Component tree between the component's opening tag and closing tag will be passed to that component as children prop.

const MyComponent = ({title, children}) => {
  return (
    <>
      <h1>{title}</h1>
      {children}
    </>
  );
}

import { MyComponent } from './MyComponent';

const App = () => {
  return (
    <MyComponent title=“Simple React App”>
      <h2>Very Kewl Feature</h2>
    </MyComponent>
  );
}

How to pass a parameter to an event handler or callback?

You can use an arrow function to wrap around an event handler and pass parameters:

<button onClick={() => this.handleClick(id)} />

You can also pass arguments to a function which is defined as arrow function

const handleClick = (id) => () => {
    console.log(`The id is ${id}`)
}; 

<button onClick={this.handleClick(id)} />

Why do we need to pass a function to setState()?

setState() is an asynchronous operation. React batches state changes for performance reasons. This means state may not change immediately after setState() is called.

We should not rely on the current state when calling setState() since we can't be sure what that state will be.

// Wrong 
this.setState({
  counter: this.state.counter + 1
})

The solution is to pass a function to setState(), with the previous state as an argument.

// Correct 
this.setState((prevState) => ({
  counter: prevState.counter + 1
}))

Feel free to bookmark 🔖 even if you don't need this for now. You may need to refresh/review down the road when it is time for you to look for a new role.

If you want to support me - Buy Me A Coffee

Video 🎥 Format if you don't feel like reading:

React Interview Questions (Entry - Junior Level)

Let's Code — Thu, 16 Dec 2021 23:16:52 +0000

Here are the most common React interview questions that will be asked on your next interview. Good luck if you are about to interview and I hope this material will help you.

What is React?

React is an open-source JavaScript frontend library for creating user interfaces. It uses component based approach to create complicated, interactive web and mobile user interfaces.

Developing single-page application with React is effortless especially using the integrated toolchain called Create React App.

What are the advantages of React?

First is the increased performance with Virtual DOM. React is insanely blazing fast.

Second, React uses JSX that makes code painless to read and write.

Third, React works on both the client and server side.

Fourth, it is simple to integrate this library with other frameworks since it is only a view library.

Last, it is easy to write unit tests.

What is JSX?

JSX is a syntax extension to JavaScript that describes what the UI should look with the full power of JavaScript. JSX provides syntactic sugar for the React.createElement() function.

JSX gets compiled to React.createElement() calls which return plain JavaScript objects. It gives us expressiveness of JavaScript along with HTML like template syntax.

What is the difference between Element and Component?

React elements are the building blocks of React applications.
It describes what you want to see on the screen. React elements are immutable.

React components are small, reusable pieces of code that return a React element to be rendered to the page. The simplest version of React component is a plain JavaScript function that returns a React element. Components can also be ES6 classes.

You can say that a component is a factory for creating multiple elements.

What are react fragments?

Fragments let you group a list of children without adding extra nodes to the DOM because fragments are not rendered to the DOM.

This is also very useful for CSS Flexbox and Grid as they have special parent to child relationship as adding an extra tag in the between will break the layout. 

What is prop in React?

Props or properties are arguments passed into React components. It contains data coming down from a parent component to a child component.

What is "key" prop?

Keys help react identify which elements were added, changed or updated, and removed. It should be given to array elements to provide a unique identity for each element.

React would be able to reorder elements without needing to re-evaluate as much.

What is state in React?

State holds some information that may change over the lifetime of the component. It is private and fully controlled by the component until the owner component decides to pass it.

Why should we not update the state directly?

Updating the state directly, like below will not cause the component to re-render.

Instead, use setState() method. This method will schedule an update to a component's state object. When state changes, the component responds by re-rendering.

What are lifecycle methods?

Lifecycle methods are custom functionality that gets executed during the different phases of a component.

These are methods are available when the component gets created or inserted into the DOM, when the component updates, and when the component gets unmounted or removed from the DOM.

What are Controlled and Uncontrolled Component.

A Controlled Component is one that takes a value through props and notify changes through callbacks like onChange or onClick.

Form data is handled by React component.

Uncontrolled Component is one that stores its own state internally, and queries the DOM using a ref or reference to find the current value when it is needed.

Form data is handled by the DOM.

In most cases, Controlled components are recommended to be used when implement forms.

What is the use of refs?

The ref is used to return a reference to the element. They can be useful when you need direct access to the DOM element or an instance of a component.

Why should component names start with capital letters?

The type of a component is determined by the way the tags are named. Both capitalized and dot notations are treated as React component while lowercase are treated as DOM elements.

What is Virtual DOM?

Virtual DOM or VDOM is lightweight JavaScript representation of the DOM. The representation of User Interface is kept in memory and synced with the "real" DOM. Update on virtual DOM is cheaper and faster than updating the actual DOM.

When React finds the differences between the previous virtual DOM and the current virtual DOM, it only makes the necessary changes to the actual DOM.

Feel free to bookmark 🔖 even if you don't need this for now. You may need to refresh/review down the road when it is time for you to look for a new role.

If you want to support me - Buy Me A Coffee

Video 🎥 Format if you don't feel like reading:

(Compilation) 10 Common Javascript Coding Interview Questions

Let's Code — Sat, 30 Oct 2021 17:22:11 +0000

Are you ready for your next front-end role 💼 💻 or are about to start a career as a front end developer/engineer? If so, here is a video 🎥 of 10 Common Javascript Coding Interview Questions that may appear on your next or future interview.

I took my previous post/video and compile it on a one video. Good luck if you are about to interview!

Codepen:

Feel free to bookmark 🔖 even if you don't need this for now. You may need to refresh/review down the road when it is time for you to look for a new role.

If you want to support me - Buy Me A Coffee

(Compilation) Front-End Most Commonly Asked Interview Questions [HTML, CSS & Javascript]

Let's Code — Thu, 28 Oct 2021 05:09:00 +0000

Are you ready for your next front-end role 💼 💻 or are about to start a career as a front end developer/engineer? If so, here is a video 🎥 of most commonly asked HTML, CSS and JS questions in one video that will definitely help you out.

I took my previous post/video and remastered it spending over 100+ hours 🕒 to make the video more appealing, interesting, and fun so it can be used repeatedly hopefully for many generations to come. Hope you enjoy!

Feel free to bookmark 🔖 even if you don't need this for now. You may need to refresh/review down the road when it is time for you to look for a new role.

If you want to support me - Buy Me A Coffee

DEV Community: Let's Code

Free Online Storybook Conference 2023 ️‍🔥

CSS Interview Question: Center HTML Element (3 Approaches💥)

CSS Interview Question: Create Responsive Design (1 Column / 3 Column)

ReactJS Tic-Tac-Toe (💥Passed Job Interview💥)

JS Coding Question #11: Are Two Object Equal (💥3 Solutions💥)

Interview Question #11:

Solution #1:

Solution #2:

Solution #3:

Final Thoughts:

10 ReactJS Coding Challenge (💥Coding Interview Prep💥)

Exercises: 🏋️

Display simple JSX

Display array of users to browser

Show/Hide Element on Screen

2 way data binding in ReactJS

Disable a button

Update the parent state

Dynamically add child components (React Children)

Sum of Two Numbers

Create Counter App

Fetch data from an API

Solutions: 🙋

Display simple JSX

Display array of users to browser

Show/Hide Element on Screen

2 way data binding in ReactJS

Disable a button

Update the parent state

Dynamically add child components (React Children)

Sum of Two Numbers

Create Counter App 🕒

Fetch data from an API

Time for a job change? 🤔

Holidays are almost over 😭 Back to Reality 😱

React Interview Questions (Mid - Senior Level)

What are React Hooks?

Basic Hooks

useState

useEffect

useContext

Additional Hooks

useReducer

useCallback

useMemo

useRef

useImperativeHandle

useLayoutEffect

useDebugValue

What is context?

How to pass data between components?

What are some limitations of React.

What is prop drilling and how can you avoid it?

What is the use of dangerouslySetInnerHTML?

Name a few techniques to optimize React app performance.

What is reconciliation?

What are Higher-Order Components?

What is children prop?

How to pass a parameter to an event handler or callback?

Why do we need to pass a function to setState()?

React Interview Questions (Entry - Junior Level)

What is React?

What are the advantages of React?

What is JSX?

What is the difference between Element and Component?

What are react fragments?

What is prop in React?

What is "key" prop?

What is state in React?

Why should we not update the state directly?

What are lifecycle methods?

What are Controlled and Uncontrolled Component.

What is the use of refs?

Why should component names start with capital letters?

What is Virtual DOM?

(Compilation) 10 Common Javascript Coding Interview Questions

Contents:

Codepen:

(Compilation) Front-End Most Commonly Asked Interview Questions [HTML, CSS & Javascript]