https://artosalminen.github.io/tags/react/ Recent content in React on Arto's dev time by-products Hugo -- gohugo.io en Wed, 02 Jul 2025 00:00:00 +0000 https://artosalminen.github.io/posts/how-to-resolve-vitest-mui-icons-emfile-too-many-open-files-error/ Wed, 02 Jul 2025 00:00:00 +0000 https://artosalminen.github.io/posts/how-to-resolve-vitest-mui-icons-emfile-too-many-open-files-error/ <p>If you&rsquo;re running your Vitest suite on a high thread count machine—like an 8-core or 16-core development machine—you may encounter a frustrating error that looks like this:</p> <pre tabindex="0"><code>EMFILE: too many open files </code></pre><p>This issue can be cryptic at first, especially when your system doesn&rsquo;t seem anywhere near running out of resources. But the root cause might not be in your system limits—it could be in your import statements.</p> <h2 id="the-unexpected-culprit-named-imports-from-mui">The Unexpected Culprit: Named Imports from MUI</h2> <p>In my case, after hours of digging, I discovered that the error was caused by using <strong>named imports</strong> from Material UI (MUI) components and icons. These named imports, when used across many test files, were triggering Vitest to open an excessive number of files behind the scenes.</p> https://artosalminen.github.io/posts/how-to-implement-hook-to-format-dates-in-react/ Fri, 22 Dec 2023 00:00:00 +0000 https://artosalminen.github.io/posts/how-to-implement-hook-to-format-dates-in-react/ <p>In this post, I will show you how to create a custom React hook that provides locale-specific date formatting functions. This hook can be useful if you want to display dates and times in different languages and formats depending on the user&rsquo;s preferences.</p> <h2 id="what-is-a-custom-react-hook">What is a custom React hook?</h2> <p>A custom React hook is a function that starts with the word <code>use</code> and may call other hooks. Custom hooks let you reuse stateful logic between components without duplicating code or introducing complex patterns. You can learn more about custom hooks from <a href="https://artosalminen.github.io/posts/how-to-implement-hook-to-format-dates-in-react/#here-is-some-further-reading-for-you">the official React documentation (1)</a> or <a href="https://artosalminen.github.io/posts/how-to-implement-hook-to-format-dates-in-react/#here-is-some-further-reading-for-you">this tutorial (2)</a>.</p>