For context, I was asked this question during a TikTok frontend interview, and I initially thought it was a trick question.
I replied it was not possible with flexbox and that it was only possible with CSS Grid.
After the interview, I was curious and decided to do a quick google. And it turns out it is actually possible with flexbox.

The Solution

The solution to this trick question is to use the flex-wrap property.
If you are not familiar with the flex-wrap property, it is used to wrap items to the next row or column when the items exceed the container’s width or height.

Demo in Action

export default function BasicDemo() {
  return (
    <div
      style={{
        display: "flex",
        flexWrap: "wrap",
        width: "200px",
        height: "200px",
      }}
    >
      <div
        style={{ width: "100px", height: "100px", backgroundColor: "#ccc" }}
      ></div>
      <div
        style={{ width: "100px", height: "100px", backgroundColor: "#eee" }}
      ></div>
      <div
        style={{ width: "100px", height: "100px", backgroundColor: "#eee" }}
      ></div>
      <div
        style={{ width: "100px", height: "100px", backgroundColor: "#ccc" }}
      ></div>
    </div>
  );
}

Demo is done using JSX, you can think of the style as inline styles in HTML.

Check out the full demo here.

Conclusion

However, I would advise against this because the CSS Grid was specifically created for this use case and is much more intuitive to use.
Do not try to use this flexbox trick in production or in a large project, because it is unintuitive and personally I feel it is a hacky solution.

If an interviewer asks you this question, I think the best reply would be to try to convince him that CSS Grid is the best option forward while being as polite as you can.

I hope that after you have read this article, you would be prepared to face this terrible and unpractical question in your next frontend interview. 🙃

HTML 🏢

CSS 🎨

• SASS/SCSS Sucks and Here is Why.
• Stop Writing !important in your CSS Code, and Do This Instead!
• Most Developers Fail This Simple CSS Interview Question (CSS Specificity)

JavaScript 🪄

• The ONLY Situation To Use ‘==’ In JavaScript
• 3 Ways To Enforce Object Immutability In JavaScript
• The Full Practical Guide To Type Coercion In JavaScript: Beware Of These 3 Common Mistakes

TypeScript 🛡️

• Never Say Never, The never Keyword In TypeScript And Exhaustive Matching

React ⚛️

• Why does my useEffect call twice in React 18?!

Web Dev 🌐

• Core Web Vitals, What are they?
• Include this Design Pattern in your next project!

You can ensure that this page is always up-to-date, and make sure to keep your eyes peeled! Because I have many more articles that I want to share with you! 👀

And if you want to receive notifications about when I publish 🔔,
Subscribe to my Email Newsletter here! https://medium.com/@ambroseliew1998/subscribe

If you want to help support me in creating the best content for you 🥰,
Click on the link here! https://medium.com/@ambroseliew1998/membership

In React 18, they introduce this new feature in Strict Mode, where they mount, unmount, and then remount your components during development mode only, to detect unsafe lifecycle methods and ensure that you are using useEffect correctly.

This is to simulate a situation where your components get remounted quickly again (which happens often, but we rarely vigorously test this scenario), and to see what the outcome of our components is.

Since React heavily focuses on Idempotence,
(See: Blog by Dan Abramov and Post by Official React Docs)
You must ensure that whenever your component gets mounted, unmounted, and then remounted again, the same outcomes are expected to be observed.

So do I work around Strict Mode or do I need to avoid Strict Mode all together?

No! The correct solution to this question is to not look for a hacky solution like using refs to avoid double firing, or disabling Strict Mode, but to instead embrace double firing and also to consider whether you really need to use useEffect.

There is also a detailed solution by the React core team. Talking about how if you must use useEffect, make sure your cleanup functions are written correctly!