How to stand out at the most common question/task in React interviews!

We've all been there when tasked/asked to describe how we would display a list of items within an array.
The more basic the question is, the more room the interviewer has to add follow-up questions and conditions on top of it.

But you know what I think… I think this is a hidden opportunity for you to stand out from the other candidates and talk about:

Folder Structure

The division into folders is very important, but nevertheless, it is essential that it does not deter us from starting, especially when it is a relatively small task.

Throughout this article, I will show examples of a healthy structure within these folders.
Their entire purpose is to show an order that will make it easier to navigate within the application and prepare it for growth in the future.

"I learned a lot just by looking at the folder structure in open source projects"

Centralized Data Fetching

As a front-end developer, normally you won't be expected to build your own back-end. But the assignment you are given will probably involve some form of data-fetching, likely either through a mock API or just a JSON file.
I chose to centralize all the API requests in one place with Axios(a promise-based HTTP client) because it provides an easy-to-use API in a compact package for most of your HTTP communication needs.

"I think I made the right decision after all they only have 31,189,088 weekly downloads"

Custom Hooks

If you want to dive into the main hook of this task, check out this article.

Interview Tip! Talk about web APIs!!

"Just a normal util functions folder who wears the React hooks cloak🦸🏻‍♂️"

Styles

Here you can see two different approaches:

1. The design should be done separately from the component. This approach requires us to properly organize our styles folder and think globally. This is the more common choice because it shows a basic knowledge of CSS capabilities without the help of other libraries such as MUI, Bootstrap, etc.
2. The design is an integral part of the component. With this approach, we will associate a dedicated design with each component and think in a focused way. I recommend using CSS js library, like styled-components, which makes it possible to integrate logic into the design more easily. "This approach facilitates the reuse of the same component in other projects."

As you can see below, I chose the first approach, because during the interview at the company I realized they work with Scss and I wanted to impress😉.

"Do not use both forms of thinking in your assignment.
Choose one, you can always elaborate on the other in speech"

Honorable Mention

Global State Management - A topic that could easily get a header of its own, "there are so many ways to do it!".
I don't want to dive deep into the library I used (Redux Toolkit), because I think there are much more advanced options out there.
Try to demonstrate that knowledge, by implementing a store or even only with React's useContext.

---

In conclusion,

As soon as you know WHY you chose this approach/structure/library (It doesn't matter if it's a little outdated), your confidence to speak will increase, especially when you show ability and knowledge on these topics:
Folder Structure, Data Fetching, Custom Hooks, web APIs, Style approaches, Global State Management.

I hope this helps. If you think about a topic that should be covered as well, please let me know in the comments.