After a couple of days of looking into improving performance of my frozen WebStorm on Windows 10(Unfortunately working in Enterprise means often no MACs :( ) I came up with following:

IDE performance:

Help → Edit Custom VM Options

-Xms2056m
-Xmx2056m
-XX:ReservedCodeCacheSize=512m
-XX:+UseConcMarkSweepGC
-XX:SoftRefLRUPolicyMSPerMB=50
-XX:CICompilerCount=2
-XX:+HeapDumpOnOutOfMemoryError
-XX:-OmitStackTraceInFastThrow
-ea
-Dsun.io.useCanonCaches=false
-Djdk.http.auth.tunneling.disabledSchemes=""
-Djdk.attach.allowAttachSelf=true
-Djdk.module.illegalAccess.silent=true
-Dkotlinx.coroutines.debug=off

Help → Change Memory Settings

Set to maximum, in my case 1688

GIT Performance

Webstorm has probably the best Git integration and Git GUI tools but the latest updates are running git status — ignore which takes incredibly long, to solve it:

Help → Find Action →…


Finding the right people with the right skills, the right personality, solid experience and good attitude is an incredibly difficult task.

Nowadays, everyone can write some code, so the first challenge is to find people with some skills. The fact that developers have some skills, can solve some algorithms still doesn’t mean that they can build applications. If we are building something small or we are a startup we can ignore the lack of experience but if we are building an enterprise application we need people with experience, people who understand the difference in complexity, have already experienced the pain…


Anyone wanting to test portals with react testing library runs into problems eventually. There are a few ways to test portals but sometimes with external libraries like Mui Autocomplete we have to compromise.

Ideally we can provide the portal root and pass this as wrapper to render, if this doesn't work we can try mocking ReactDom.createPortal and if this doesn't work, here is how I did it within my project. (Not saying its the best solution but it certainly works :))

test('Form with Autocomplete using Portal', async () => { let rendered: ReturnType<typeof render>; await act(() => { rendered =…


This article started with an argument at work about what actually is a unit test. I had a simple JS function which imported a few internal and external methods which were not mocked in the tests. My colleague pointed out that if imports of packages or modules are not mocked it is an integration test and not a unit test. I of course argued that it doesn’t matter whether the imports are mocked or not, it is still a unit test.

Testing pyramid

So, what is a unit test, how it should look like and how much of it we should have?


I am writing this to myself because it is always a pain to google for how to get the type of a property on a 3rd party component. At work we use a 3rd party component library which often times doesn’t export types correctly. In my current case a Dropdown component accepts and array of DropdownItems but the type for items is not exported. Instead of writing it by hand we can do just this:

export type DropdownItems = JSX.LibraryManagedAttributes<
typeof DropdownMenu,
DropdownMenu['props']['items']
>;

This is in the documentation, anyone can google it but it always takes me 15 minutes and I somehow can’t remember it :D


With all the new cool context and hooks features, we sometimes end up with a component consisting of a long list of nested providers. This is often hard to read and is too much visual clutter.

I didn’t find any easy way of composing Providers so I came up with my own little hack.

import React, { FC, ComponentType, Fragment } from 'react'; type Components = ComponentType | [ComponentType, { [key: string]: any }]; interface Props { components: Components[]; } export const Compose: FC<Props> = ({ components, children }) => ( <Fragment> {components.reverse().reduce((acc, curr) => { const [Provider, props] =…


Photo by Artem Sapegin on Unsplash

@UPDATE this article is a bit outdated, please also look at https://github.com/testing-library/react-hooks-testing-library

I started using hooks in production a couple of weeks ago and so far it is a great experience. I received the following requirements in my application and decided to leverage hooks for it:

  1. When a user enters certain pages we need to change the document title.
  2. When the user leaves these pages we need to restore the title to whatever it was before.

While playing around, I discovered a really cool use case for the useEffect when used in combination with component unmount.

Let's look at our…


In the past couple of years, I went through a lot of discussion about best practices, standards, architecture etc. All the clean code arguments with people saying it is ok to have more than 300 lines of code in a file or why do we need to create small reusable functions which do 1 thing and have only one responsibility :)

I came to a discovery while preparing a presentation about domain driven design which made me realise why are some people so much against best practices, coding standards and why they just can’t write clean code and why is…


I have been doing interviews for senior ReactJS developers for almost a year. Right now, when I am preparing for an interview myself, I realised that knowing when someone gives you a great answer and giving the answer yourself is not the same :)

Normally, I wouldn’t be allowed to share the interview questions I use at work but since I am reusing my original private questions, I don’t violate any rules and hope someone can benefit from it.

How are the questions structured? We have a few categories: JavaScript, ES6+, React, Redux, Advanced React and some general development questions…


In this article we’ll have a look at a practical example that I came across on stackoverflow and try to refactor and improve upon it. It’s a real world example which looks perfectly fine, but doesn’t meet some basic requirements to be considered “Good quality code”. Let’s begin by having a look at the code below:

const cars = [
{
company: "honda",
colors: [
{
name: "burntRed",
},
{
name: "springGreen",
},
],
},
{
company: "ford",
colors: [
{
name: "burntOrange",
},
{
name: "black",
},
],
},
];
for (let c = 0; c < cars.length; …

Julius Koronci

Front-end lead at @SECRET global bank :)

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store