Forem: PavloReutskiy

A Deep Dive into React Portals: From Theory to Practice

PavloReutskiy — Sun, 24 Mar 2024 15:08:20 +0000

I remember when I first attempted to create a modal window, I turned to YouTube looking for detailed explanations or tutorials. I was aware of React Portal's existence but had no experience using it. To my surprise, I found that most recommendations were about creating a simple modal component without utilizing the portal. This approach can lead to unexpected errors since such a component might be reused across different parts of an application. But let's start from the beginning.

In this article, I will explain in detail the advantages of React Portal, the problems it can solve, and why using it is the perfect solution for creating modal windows, tooltips, and other elements that need to appear on top of the page's other content.

✔️ Modal

Firstly, let me clarify what I mean when I talk about a standard modal component without a portal.

It's a standard component that accepts children as props and renders content passed from the parent component.

The parent component manages the state of the modal window using the useState hook. This state changes when buttons are clicked in both the parent component and the modal itself.

To ensure the modal window appears over the main content of the page, we add the necessary CSS styles.

This is a very simple example of implementing a modal window, and the logic behind its creation doesn’t change much when using React Portal. However, there's an important detail - the stacking context, which we'll discuss next.

✔️ Stacking context

Almost every front-end developer has encountered a scenario where, despite a high z-index, an element doesn't appear on top of all others. The cause of this situation is the stacking context.

According to documentation, the stacking context is a concept of three-dimensional arrangement of HTML elements along the Z-axis relative to the viewer. By default, all elements on the page are placed in the order they appear in the HTML. However, under certain conditions, such as absolute positioning with a z-index different from auto, opacity less than 1, among others (more details here), a new stacking context can be formed.

Consider an example where several absolutely positioned blocks of the same size but different colors are created (codepen). Next, we will explore several scenarios by changing the z-index.

Which color will be on top in the following example?

The correct answer is yellow. This is because at the body level, there exists a basic stacking context that determines the display order of the green and blue elements. Since blue has a higher z-index, it and all its child elements will be placed above all others at the same level.

Let's consider another example with a slight change in conditions. Which element will now be higher than the others?

The correct answer is orange. The blue element, within its stacking context, "defeats" neighboring elements while simultaneously creating a new stacking context. Its child elements (yellow and orange) will compete with each other within this context. The z-index of the parent element, though higher, is not considered.

This can be likened to a wardrobe with shelves stacked on top of each other, which can be rearranged at will. Each shelf contains clothes arranged one on top of the other. The bottom shelf may contain many items, but they will always be lower than even a single item on the top shelf. The shelves and the clothes on each shelf represent stacking contexts.

And here's the final example:

You might have guessed that the behavior of the modal window will not be as expected, as the blue element, with its higher z-index, will not allow it to unfold over all other elements on the page.

In this simple example, the problem is evident. However, when dealing with a large page composed of many components, such a scenario can easily go unnoticed. Moreover, the Modal component might work perfectly on some pages and encounter problems on others. Often, such issues are challenging to diagnose.

But there is a solution – React Portal!

✔️ React Portal

Portals offer a unique capability in React: they allow us to render child elements into different parts of the DOM that exist outside the parent component's DOM hierarchy, thus making them independent of the stacking context. This is achieved using the createPortal() method, which can take up to three arguments:

children - can be anything from JSX, components, to even simple strings or numbers.
domNode - this is the DOM node where the portal will be placed. Typically, it's an element created outside the root element to which the React app is directly attached.
key - an optional parameter that can be a number or a string, serving as a unique identifier for the portal.

Let's modify our Modal component to use React Portal.

First, we add an element with the identifier portal, where our portal will be added. The identifier can be any value.

Next, in the Modal component itself, we import createPortal from the react-dom library. Instead of returning JSX as we did before, we use createPortal. The first parameter is what we want to add, and the second parameter is where we want to add it. In our case, it's the element with the identifier portal, adjacent to root.

And just like that, it's done! We can now use the Modal component as before, but with the confidence that this component and the children passed into it will always be on top of the page because it is located outside its bounds.

In general, we can highlight two key advantages and features of React Portal.

🔹 As we've already discovered, the first advantage is that the portal allows us to bypass the limitations imposed by the parent element, especially through the stacking context or, for example, when using overflow: hidden.

🔹 The second, and perhaps most interesting feature, is that although the portal changes the physical location of the element in the DOM, it does not change its behavior relative to the React hierarchy. This means our Modal component continues to behave as if it is a regular child element of the component rendering it. This includes the ability to use Context and the rules of event propagation.

These features, presumably, explain the name. The component, using a portal, seemingly teleports to the required place in the React app but behaves as if it has always been there.

✔️ React Portal in Next.js and Server Components

When using portals in Next.js, a few considerations need to be taken into account.

Since a portal manipulates the DOM directly, it can only be a client component, which requires the "use client" directive. Additionally, before adding a portal, you need to ensure the DOM has been fully loaded. This can be achieved by using state and the useEffect hook, which runs at the end, after the component has been rendered.

Although the portal will always be a client component, the children passed into it can still be server component, but only if the parent component is also server-side.

✔️ Summary

React Portal is a cool and powerful tool. It may not be necessary for every modal implementation, especially in smaller projects, but there are many scenarios where it can significantly help and simplify a developer's life.

I hope this article has been helpful and demonstrated when and how to use React Portal effectively. It not only solves specific challenges efficiently but also opens up new possibilities for optimization and enhancing the user experience in your applications.

Thank you for your time and wish you success on your exciting journey of web development with React!

The Magic of Closures in JavaScript for Beginners

PavloReutskiy — Sat, 12 Aug 2023 13:52:44 +0000

Closures are a very important part of JavaScript that every developer should know well. But, this topic often becomes a real challenge for beginners and can be difficult to understand. In this article, I want to explain closures in JavaScript in a very simple way.

To understand closures, you need to know three main concepts:

🔹 Scope

🔹 Lexical environment

🔹 The closure itself

✔️ Scope

Scope is a part of code where you can use a variable, function, or object. In other words, it's the part of code where this item is "seen".

Most of the time (let's pretend the var keyword doesn't exist), the scope is the code block inside curly brackets - {...}.

This isn't exactly right, but to keep it simple, we can say every function, and also code blocks like if, for, while, etc. (when using let or const variables), makes a new local scope.

In JavaScript, there are 2 main scopes:

Global Scope - variables declared outside of functions or code blocks can be used anywhere in the code. They are global.
Local Scope - as mentioned, variables inside a function (Function Scope) or code block (Block Scope) can only be used inside that block.

Let's look at an example.

As we can see, the playerHealth variable is in the global scope, so we can use it both globally and inside a function. But the damageFromMonster variable was declared inside a function, which means it's within a local scope. That's why, when we try to access it outside the function, we get an error.

This example also shows that different scopes can interact with each other. Furthermore, local scopes have access to variables from the outer scope. And this leads us to the concept of "lexical environment".

✔️ Lexical environment

The Lexical environment is a data structure that stores information about variables, functions, and other objects in the current execution context. It's an invisible object that exists for every block of code or function in JavaScript. It only exists in the computer's memory during code execution, so it can't be physically seen.

This object consists of two parts:

an object with variables in the current scope,
a reference to the parent lexical environment.

Let's go back to the previous example. We have 2 lexical environments.

🌍 Global, which doesn't have a reference to a parent lexical environment because one doesn't exist.

🔐 Local, which refers to the global lexical environment.

❗️I want to emphasize that the examples above are not real code, but just an attempt to visually imagine how the lexical environment object might look.

It's also important to note that the local lexical environment for the monsterAttack function is created not when we declare the function, but when we call it (monsterAttack()). This is a crucial point for understanding closures, which we will discuss next.

✔️ Closure

Closures in JavaScript - it is a feature where a function "remembers" its lexical environment in which it was created. This means that a function can access external variables even after the outer code has finished its execution.

In other words, when calling a function, its lexical environment is established, storing the current values of variables at the time of the call, as well as referencing its outer environment. This allows the function to "see" the variables that were accessible to it when it was declared.

Indeed, this concept might seem a bit confusing at first. However, in practice, everything becomes much clearer.

Let's look at an example.

Imagine we're inside a video game. In game's editor, we create a character. Let's choose a wizard to whom we assign a name (name). This wizard will immediately have a basic spell (castSpell), as well as 100 mana (mana) for its use. The creation of such a character can be represented by the following function.

When we click the "Create" button, a character is created, and it might look something like this:

At this point, a lexical environment for the createWizard function will be created.

When this function completes execution, its lexical environment disappears, but some parts (such as the mana and name variables) are "remembered" due to the closure of the castSpell function.

After this, we execute our first attack using our spell.

At this point, another lexical environment will be created, now for the castSpell function (which is stored in the lightWizard variable). This environment will exist within the lexical environment created with the lightWizard character, and therefore it will reference it and its variables (name and mana).

With the next attack, the mana will be reduced. This is because a new lexical environment for lightWizard is created during the new spell cast (castSpell). This environment will include the current mana value, which is 80. After the subsequent attack, only 70 will remain, and so on.

Now, a new player appears in the game. He also uses the editor and creates a new wizard.

For this character, a new lexical environment is created, which differs from the previous one only in name.

Then, a battle between the two wizards begins. Voldemort attacks Harry with a full 100 mana.

Harry strikes back, but he has less power since he has already used some of his mana.

As you've probably realized by now, a new lexical environment is created with each attack, storing the current data, including the remaining mana.

Even though both wizards were created using the same createWizard function, their execution contexts are different. Each one has its own separate variables. So, when creating a new wizard with createWizard(), you always start with 100 mana.

This example is quite basic, but it illustrates the core concept. I chose this approach to avoid complex explanations and to focus on the main idea of this significant and interesting topic.

I hope this article sparks your interest and encourages you to learn more about closures.

Todo App: Why is it a Good Choice for a Pet Project?

PavloReutskiy — Mon, 10 Jul 2023 15:38:12 +0000

Have you ever pondered whether it's worth it for newbie programmers to invest their time in creating yet another Todo App as a starter project?

The Todo App has become a classic, often seen as a clichéd and overused concept for initial projects. But, what if we reconsider and view it from a fresh perspective?

In this piece, I'm keen on sharing my insights and experiences, aiming to benefit developers who are setting out on their programming journey, just like I did.

🐝 Todo App: A Simple Task that Demands Comprehensive Knowledge

A Todo App is a typical task manager. You add tasks, mark them as completed, and delete them. It seems pretty straightforward at first. However, I strongly believe that it's an excellent exercise for beginners, and I'm going to try to convince you.

Despite being a small project, it requires a vast range of knowledge. It's an opportunity to put into practice all the tools you've learned so far.

For instance, while working on a React task, I had substantial hands-on experience with hooks and understood the advantages of using Context and general state management tools. Moreover, I utilized tools like React.memo, useMemo, and useCallback to optimize the application.

👀 Todo App: Pay Attention to Project Structure

Although the project may seem small, undertaking it makes you appreciate the significance of structuring your application properly, dividing logic into separate components and files, and maintaining code readability.

🎓 Todo App: A Chance to Familiarize Yourself with Additional Libraries

If you're considering building a Todo App, I'd suggest deciding in advance the libraries you'd like to experiment with. For example, I used the i18next library to understand how to create multilingual applications and the React Transition Group to make the application more engaging and fluid.

I assure you, a Todo App can be more than a simple starter project - it can be a playground for enhancing your skills.

🖥 Todo App: Not Just a Front-end Project

You could develop the Todo App as a front-end-only project, handling the task list locally. But you could also take a step further and create a complete full-stack project. While working on this project, I used a student API provided by my school (Mate academy🚀), which gave me practical experience working with APIs on the client side. However, I intend to return to the project and create my own RESTful API using Node.js. This will be a practice that, while simple, will be incredibly useful.

If you wish, you can take it even further and add user authentication functionality so that the application can be used by multiple users. This will surely be a beneficial experience for your future career.

Conclusion.

A Todo App is an excellent method to bring your first extensive project to life, applying your existing knowledge while also learning and exploring new tools. Of course, more intricate projects would make your portfolio stand out, but remember that your initial project should be achievable and enjoyable, both in process and outcome.

For me, the Todo App was the gateway to experiencing programming and developing a lifelong passion for it.

🙏 I appreciate your time spent reading this article. Since it's my first attempt at writing, your feedback and insights are invaluable to me.