React & Node.js: Level Up. Summary of the Meet-up

#Article
July 5, 2022 5 min read

Developers often look for ways to be more efficient. Thankfully, JavaScript frameworks don’t restrict them in building their system and provide much freedom. However, with great power comes great responsibility. So, how to cope with problems encountered on your way? And what can help in optimizing performance? We discussed with Dmytro Hryshchenko, Full-Stack Software Engineer, and Grigor Oganesyan, an Advanced Software Engineer at Innovecs, during the React and Node.js: Level Up online meet-up on June 16. We have prepared a summary of the event covering the key points.

Grigor Oganesyan shared approaches that may help you solve problems occurring using Node.js:

  • Observer pattern. Grigor suggests using a combination of an orchestrator and event queue as an observer pattern.
  • Modules for business processes. Usually, we build models for entities. Suppose you have an e-commerce project online market. You have entities like orders, users, clients, and products. When your client buys something, you create an order and maybe change your user balance to decrease the number of items in stock. You will most likely do all this stuff in the order model. But is it correct? Maybe you want to build an order processing model that will do everything one by one? You do not call one entity-based model from another based model. You generate a new layer.
    In our case, it should look like this: this password model takes whatever it needs from the user and notification models and changes the password. And do the change password thing, the notification sending, and increase the counter. We have all the functionality we had before, but now we do not have the circular dependency anymore.

There are also supportive approaches allowing to avoid problems using Node.js. Here are some of them:

  • Automated unit tests. To make a unit test, you must build your nodes and methods by following the single responsibility principle. It would help if you mocked your notification model. If you build a unit test and have to mock something, think twice. Maybe you should do something differently, follow another approach. Automated unit tests are always a good idea. They bring more confidence once you write tests for your code.
  • Code review. Indeed, it will not solve architectural issues. But those problems like SQL Dependency or any other did not surface due to our laziness. It’s part of our nature. And a reviewer doesn’t care whether you’re lazy or not. It would show you where you slipped up and what should be done differently. Sometimes it might help.
  • API. Previously Grigor thought that it happens only with junior-level developers. Indeed, it is true for full-stack developers. Imagine that you have a client and a server. And a client asks to make a sandwich. API points response: double cheese, triple-sauce stake-salami sandwich.

    Why? Because a full-stack developer built it. To avoid such cases, you should separate the client-side and API between two people even though they’re both full-stack developers. I suggest splitting processes between at least two developers when discussing client-server communication.

Dmytro Hryshchenko, a Full-Stack Software Engineer, talked about the key properties of React. It’s a well-known and widely used concept. Yes, we already understand why we need it and how to use it. But Dmytro saw some issues the developers had with this property quite often. That is why he has prepared some recommendations using it:

  • Use it in each mapping operation in the renders of React Components.
  • Use some unique id for each property, “index” might not be good enough.
  • Can be used to trigger the remounting of the whole React Component.

Dmytro also touched upon the commonplace hook usage in React infrastructure. At the same time, he warns that you shouldn’t use hooks conditionally. If you need to introduce any condition — do it inside the hook. “Eslint-plugin-react-hooks” plugin can help you identify some misuses. When you add it to the project, it will show you all the potential cases where you might be wrong.

The most straightforward hook is the use state. Dmytro stresses that sometimes updating the state with a callback is vital. It is essential to rely on a previous value of the state. It might be just the regular render of the component.

Also, it can be helpful inside useEffect, where the current value of a state is not available since it is not provided in the dependencies array. It can help set the initial state if some heavy computation is required.

The speaker also calls for using the dependencies array in hooks correctly. Inside the dependencies array, when React tries to estimate if the value was changed or not, it provides the comparison. And this comparison is made by the following rules:

  • Primitive values are compared by their values. Primitive values are strings and numbers.
  • Objects, arrays, and functions are compared by their reference.

State batch updates. When React has introduced the feature of React hooks, and when we use state hooks so commonly, we can split the state into multiple independent parts. It helps to focus better on the business logic and split the state based on the business requirement instead of storing all the states in one object and dealing with this object each time when providing an update. So:

  • A few parallel state updates will be batched together.
  • Before React 18, a few parallel updates in any kind of callback (times, promises, event handlers) would cause a separate re-render.
  • If you need no trigger re-render on each state change — use “flushSync.”

Now let us look at quite recent features of React that are related to the suspense. Here is what Dmytro recommends:

  • Use lazy loading to show the content only if a user requests it. When you have the routing functionality with different pages, and you are not sure whether it will open some of those pages, you can apply lazy loading functionality with the default value of suspense to show the loading state. It will help you optimize your bundle and not to load all the code that most probably each user will not need while using your application.
  • Take into account your Component’s pending and error state with Suspense and Error Boundary.

Dmytro also briefly touched on the topic of children API. Let’s look at how we can move further from that point. React has a dedicated children API that might be useful to modify the values you put as children inside your React component. So, you can not only render the children as they are, but you can enhance them with some additional functionality. You can conditionally render them. You can slice them, change places, and more. So, you can tweak them as a kind of array. Here is the list of methods that can be applied to the Children:

  • “toArray” converts the children to a real array
  • “count” provides the number of children
  • “only” makes sure that only one child is provided
  • “map” allows modifying each child
  • “each” allows iterating over each child

One of the exciting things that have been added to React 18 is the functionality of transition updates and two useful hooks:

  • “use Transition” allows prioritizing urgent updates and delaying heavier and less urgent ones.
  • “useDeferredValue” helps in cases when you don’t have control over a value.

These hooks try to achieve the same goal but should be used depending on your situation. If you have whole control over the state updates and are the person coding the state update, you can choose “use Transition.” And suppose you want to receive control over the state updates that happen in some external component from a library that does not have direct access. In that case, you can use “useDeferredValue.”

The render props pattern is Dmytro’s favorite React pattern helping to replace almost every use case of the Higher-Order Component pattern that was extremely popular previously and was not too optimal from the usage and typization perspective.

In the end, Dmytro draws the audience’s attention to The State’s management of React. They are the following:

  • Regarding the context, Dmytro suggests using context only when it comes to some global state that is rarely updated. For example, if you have some visual SIM dark or light that the user selects, it’s not expected to be changed often. Or if you have some user’s permissions, for example, received from a decoded token when a user authorizes to your system, you want to store those permissions and access them from any part of your application, but you don’t expect them to be often updated. Dmytro suggests putting the context only very close to the part of the application where you want to use it. Suppose you have a few pages inside your application, and the context belongs to the functionality of only one page. In that case, he suggests not to put it on the very top of your application but to put it specifically close to the page where it will be used. Because you have to remember that each time you update the value of the context, all those children will also trigger the render.
  • UseReducer for complex state changes because it’s much more readable and easier to debug such functionality when you can clearly understand which action triggers what update.
  • UseState only if a value change should trigger re-render, and useRef otherwise. Use should think about the update of each value inside your React component. You also have to ask yourself whether the update of this value will be needed for re-render, or it should be used just for some internal application logic. For example, if you are positive that the component has to trigger the re-render changing this value, you have to UseState. On the contrary, if that value is utilized for some further usage but should not directly trigger the update of the re-render, you can efficiently use such a value inside the reference of the component.

To sum up, you can always find a solution to your problem if you are passionate about your job. Just keep looking for new options and learning opportunities.

YOU MAY ALSO LIKE:
June 17, 2022
12 Reasons For Joining Innovecs
The global IT landscape is vibrant and dynamic. Myriads of tech companies are appearing in the arena and are delivering all kinds of digital solutions. At the same time, not every company has a community around it. From day one, Innovecs’ leadership set the objective of providing equal high-quality experiences to all stakeholders, clients, and employees. For over a decade, the distinguishing feature of Innovecs has been its DNA and values — Innovate, Inspire, Care. The company’s culture revolves around these concepts, creating multiple opportunities for the self-development of our people — both professionally and personally. Driven by the belief, that only happy teammates promote creativity and innovation, Innovecs makes every effort to ensure the well-being of each Innovecser. Today, we would like to share the key benefits of working at Innovecs. Here are the main reasons to join us. 1. Stable Growth and Career Opportunities More than 850 Innovecsers have provided valuable digital transformation experiences to over 100 clients. Innovecs’ portfolio contains more than 60 successfully implemented projects, and the major criterion of our success is our clients coming back for more. Over a decade, Innovecs has managed to achieve significant results, which are reflected in our corporate stats. At the moment, the company has team members on five continents, and our next soon-to-open location will be in Georgia. We are also opening new hubs in Poland, Colombia, and two more European countries soon. “We as a company always start by building bonds of trust with our clients. Whatever the development stage is, we accompany them, guide them and think it is our duty to anticipate their questions and concerns. Innovecs is constantly raising its standards in terms of providing the best services possible. This is why we have a number of loyal clients that enjoy their experience and come for more. That loyalty reflects a crucial thing for us — we are valuable to them”, — Alex Lutskiy, Founder and CEO at Innovecs. For the fifth time in a row, Innovecs is on the Inc. 5000 list, the list of fastest-growing private companies in America, and the Top Global Outsourcing companies. For the fourth time, Innovecs is recognized on The 2022 Global Outsourcing 100® list by the International Association of Outsourcing Professionals (IAOP®). In 2021, Innovecs officially became the Platinum Partner of ISTQB (International Software Testing Qualifications Board), and also has achieved Amazon Web Services (AWS) Select Consulting Partner status in the AWS Partner Network (APN). 2. Reinvent Your Career with Us What do we mean by ‘self-fulfillment’? From our point of view, this means having our ambitions met, whatever they are. Just as our people innovate the world, we as a company feel responsible for innovating them in the first place. All Innovecsers are united by a great desire to move forward and grow as personalities and pros. Our teammates can develop both horizontally and vertically, and transform from developers to Delivery Managers and VPs. Apart from advancing a career, each Innovecser can reinvent it. That is, our educational programs, courses, tracks, and workshops allow for changing a project, role, or even domain. “Innovecs is synonymous with growth and development. I am already working in the third position in this company. It’s cool that people without experience can try themselves in new roles, learn by doing and grow professionally. Courses and workshops are constantly held here, and this remains far from universal. A Promotion Plan is developed for each employee for six months, which lists the knowledge and skills you need to gain within this period. The bottom line is that I feel support from Innovecs, and it is invaluable for me”, — Olena Ratova, Project Coordinator at Innovecs. 3. Active Lifestyle The uniqueness of our culture owes to the uniqueness of our people. Every Innovecser is a separate story that enriches our community. Upon coming to Innovecs, each of us brings a set of personal likings, beloved hobbies, activities, interests, and aspirations. We even bring our concerns and learn to deal with them thanks to professional attention. Innovecs fully accepts us the way we are. Whatever the source of inspiration is, you can practice what you love — jogging, yoga, football, tennis; take part in challenges and competitions; receive gifts and acknowledgment, and share your achievements with your teammates. Innovecsers define the variety of communities. Anyone can initiate a club, and become a leader of one. “I was very happy with the availability of the yoga community and immediately joined it. It is good that you can attend classes without leaving the office. It is nice that there is an opportunity to do your favorite things — here it is encouraged and supported. As for the new activities, I joined the Mindfulness community, where we hold discussions and practice meditation”, — Oksana Hubchyk, QA Manual at Innovecs. 4. Well-being: We Are On Your Side A global company has a global mindset. We are comprehensive in our approaches, whether it is services, products, or experiences. The same pertains to the concept of employees’ happiness. It is our belief that apart from professional success, a sound mind in a sound body has a huge impact on quality of life. To us, well-being encompasses the care of physical and mental health, confidence in financial and social stability, as well as a sense of security. “If corporate culture encourages you to combine work with activities that inspire you, your well-being should not be a matter of concern. Another sign of “norm” is balance in all spheres of life. One area cannot develop in the absence of another. Otherwise, you start to feel out of balance. It is crucial to understand your limits and keep yourself balanced — relax, do hobbies and communicate. I must point out that the corporate culture of Innovecs’ well-being is an important component that is reflected in actions, not words”, — Olha Havlytska, Community Relations at InnoClub by Innovecs. 5. Flexible Workplace We are global, but at the very same time, we go local in providing a comfortable working environment. Local and granular. It is common knowledge that working conditions can make or break creativity as well as support or damage our health. We all need what is best for us — attending offices and enjoying conversations; managing tasks and teams from the comfort of our homes in solitude, or juggling the two if necessary. Our offices and hubs offer far more than just a well-equipped and stylish workspace, but a lifestyle space of self-development, mental and physical recreation, access to education, and hands-on experience. Innovecsers choosing to work remotely from any part of the world can and will enjoy a local benefits system and join us at online events, activities, celebrations, conferences, and systematic corporate meetings. Innovecsers are welcome to explore our Relocation Support Program and learn about how we can assist in this matter. “I very quickly found an apartment next to the office. I also had a week to rest, adapt, and work things out in the new place. So when I showed up for work, I was ready. Plus, I immediately found a company where I was very comfortable. Innovecs was also very helpful with the relocation: our Care department provided me with rental options that partly covered the cost of moving”, — Rostyslav Kylymchuk, Java Software Engineer at Innovecs. 6. Professional Growth Experience with Innovecs might start even before a talented person is among our teammates. Thanks to our Juniorship programs by InnoCamp, we take newbies and turn them into specialists who then may want to join us. And after they do, the learning journey then continues with special training for hard and soft skills, English classes, enrollment in a global certification preparation program, mentorship program, and an individual development plan. And there will be more. One of the crucial touchpoints with our people is 24/7 access to the learning process. We are always aware of the needs and ambitions of each Innovecser. We turn systematic feedback into new opportunities. “When a new set of internships was launched, I became interested in turning into a mentor to share my skills and knowledge with someone. And I regard it not only as teaching but also as the development of my own skills. This will definitely come in handy if you want to build a career and develop leadership skills”, — Ihor Pavlenko, Software Engineer at Innovecs. 7. H2H Philosophy The human2human approach is a broad concept that is reflected differently in various companies. At Innovecs, consideration for the talents we have is letting them speak and making sure their feedback turns into solutions. In order to create and generate out-of-the-box approaches, people demand inner freedom and a safe space to offer unique ideas that change the status quo. Everyone in the company has freedom of self-expression. We have an open-door policy and systematic meetings, where Innovecs’ leaders share crucial corporate information so that all the team is on the same page in terms of the current state of affairs. “The CEO of Innovecs is very open, he is constantly in touch with the company. You are always up-to-date with the latest news, and you know about clients. I always follow everything that happens. The atmosphere is open and transparent, and I am happy to be a part of it. I say out loud that I work at Innovecs because I’m proud of it”, — Andriy Bosak, the Technical Support Specialist at Innovecs. 8. Engineering Leadership Platform Engineering Leadership promotes global digital transformation. This is why we have launched InnoHub, an Engineering Leadership Platform. Its core purpose is to empower collaborative growth and build a community of engineering leaders. We believe engineering leaders are not only those who lead the team but everyone who develops innovations through everyday tasks as an expert. “Today we can say that InnoHub is a platform for the development of Engineering Leadership. Our main goal is to expand our capabilities and build a community of technical leaders. InnoHub consists of three components. First, it is a community of passionate engineers who want to initiate technological change and interact as equals. Community members evolve and develop their projects, teams, and skills. Second, InnoHub is a source of inspiration, where meaningful content is broadcast through events and networking. Third, InnoHub is an online space, a platform for meetings, training, and association of engineers from around the globe. Tech magic happens when these three elements merge”, — Alina Shcherbyna, Head of Talent Marketing and Events at Innovecs. 9. Transparency Leadership On a human note, we all tend to gravitate to people who are authentic, genuine, unmasked, and not afraid to be vulnerable. A leader is responsible for establishing a culture of trust, and being consistent in its maintenance. And if one succeeds in doing so, the mindset spreads across the organization and becomes the only way to go for everyone. Transparency leadership is the first step toward meaningful relationships with employees. And this is the fundamental principle Innovecs works and lives by. “A leader’s transparency demands systematic accountability. Whether it’s financial presentation, our quarterly Q&A session, weekly call, or honest talk one-to-one during a coffee break — people need this stability and presence. A real presence when you genuinely care, but not just as a formality. On the other hand, every team member is not only welcome to provide their own feedback on numerous aspects of corporate life but it’s also guaranteed their voice is heard and taken into consideration. Thus, transparency leadership is an ongoing mindful dialogue and drives mutual value for both company and its people”, — Alex Lutskiy, Founder and CEO at Innovecs. 10. Corporate Culture Driven By Values Business for business’ sake has no future. People always seek higher purposes and big ideas behind everything. Since day one, Innovecs has been nurturing an environment where like-minded talents can create together and enjoy the process in each other’s company. Our DNA is SPECIFIC: Innovecsers are Smart, Professional, Engaged, Collaborative, Innovative, Focused, Inspiring, and Caring. Innovecs practices three core values, incorporated into the DNA: INNOVATE, INSPIRE, CARE. Innovecs represents a community-driven ecosystem, that is, our people can create and become leaders of some community or club by interest inside the company, and Innovecs will support them and invest in their passion. “Being caring is first and foremost about creating an atmosphere. You can arrange it with the help of working and non-working team building. Caring is manifested in finding a thin and invisible boundary of social unity and trying to produce it in your team. The kickback of the team is very important because it is not a one-way street. Not only the manager must play his role in uniting the team, but also the employees themselves must collaborate with each other, determine the necessary conditions for the tasks, ask you questions, and more. It’s much cooler to see people solve these issues on their own because the team is evolving. You as a manager are needed for extraordinarily difficult tasks. It’s nice when a team is a whole, both in and out of work”, — Andriy Troianov, Delivery Manager at Innovecs. 11. A Lifestyle, More Than Just a Job Innovecs focuses on each employee’s ambitions and aligns them with our business goals for mutual success. We consider work and leisure as equally important parts of life. Therefore, in addition to the necessary working conditions and continuous learning options, we take good care of the physical and mental health, recreation, and personal development of the team. Every single day at Innovecs brings something new to the lives of our teammates — knowledge, skills, insights, and meaningful connections. “At Innovecs, you are not confined to a desk whatsoever. This is the place for your personal and professional development and to be around an awesome team. There are many opportunities for personal and professional evolution. This is your lifestyle. In the morning you train in the tennis community and then proceed to work. In addition to lunch, you have a workout again, and in the evening when the work is done you play table tennis with teammates. This is your active lifestyle. You are interested, you enjoy the day, you want more, and your work goals are fulfilled in the same rhythm as you do your hobby. Easy and effortless. You don’t force yourself to work; you like it”, — Olha Havlytska, Community Relations at InnoСlub by Innovecs. 12. Benefits and Perks Innovecs operates on the basis of diversity, inclusiveness, development, and equal opportunities for everyone. Innovecsers can evolve professionally via the vibrant InnoCamp program. All teams can access individual development planning and career coaching, educational and professional certificate programs; join a Mentorship Program, and have lifetime access to training materials in our Learning Management System. With the help of the InnoClub initiative, all Innovecs’ people across the globe can maintain their mental and physical health, and draw inspiration from our communities. Whether it is running, mindfulness and meditation practices, online gym and yoga, or other activities — everyone can find something special. Regardless of the offices’ location, all of them are united by the universal benefits system. Each Innovecser — either office-based or remote — is provided with equal motivation frameworks and incentives. Everyone is provided with private healthcare insurance, team-building activities, social events, and occasional gifts to celebrate Innovecs lifestyle. “​​Despite the remote mode, I do not feel separated from the team or company. I constantly receive invitations to corporate parties. Not so long ago there was a rebranding of the project I’m working on. Two hours before the presentation, a courier delivered a parcel containing four small cocktails and a branded glass. Distances are washed away by such lovely initiatives”, — Ihor Kanivets, Advanced DevOps at Innovecs. These are the main reasons to consider Innovecs as a new stage in your life. And there is one more reason to join us — we are fun, passionate, and voracious. If you feel you belong with us, check the available roles and brighten Innovecs with your presence: https://jobs.innovecs.com/vacancies/
Article
May 18, 2022
Unity As a Weapon Against Evil: How Volunteering Helps Resist Russia’s Enemy Attack (Part 1)
Innovecs is a global company, we have two large offices in Ukraine located in Kyiv and Mykolayiv. On February 24, Ukrainians woke up to a new reality — a hostile Russian invasion shattered the plans and quiet lives of 45 million people. Instead of getting confused, the Ukrainians united in the name of victory. President Zelenskiy is now compared to King David of Israel, who skillfully dealt with the huge and ugly Goliath. A small country on a map is fighting a huge Russian army. National collective responsibility has been a powerful blow in response to Russia’s legend of a weak and divided Ukraine. Here everyone is either a soldier or a volunteer. Each of us has our own battlefront. Someone hospitably opens the door to migrants, makes dumplings for soldiers in the defense, someone donates to the army, and seeks options to buy bulletproof vests and medical kits for the Armed Forces of Ukraine. Someone performs DDoS attacks on Russian sites and is waging an active war on the information front. Some advise and provide psychological assistance, some treat and organize humanitarian convoys free of charge. Innovecs, like hundreds of others, has joined the financial support of the army. We also organized additional fundraising for each team member who wanted to donate money to support the army. Of course, Innovecsers help not only with funding, but also volunteer. Today we will share some stories of our team members who chose their “battlefront” during the war with Russia.
Article
LET’S TALK