<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Denys</title>
    <description>The latest articles on DEV Community by Denys (@lgtome).</description>
    <link>https://dev.to/lgtome</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F837358%2Fe1ed2e6a-a4fc-407d-a97f-e0a8dcdcf7ab.jpeg</url>
      <title>DEV Community: Denys</title>
      <link>https://dev.to/lgtome</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/lgtome"/>
    <language>en</language>
    <item>
      <title>How count up lines in a directory</title>
      <dc:creator>Denys</dc:creator>
      <pubDate>Thu, 10 Apr 2025 17:03:50 +0000</pubDate>
      <link>https://dev.to/lgtome/how-count-up-lines-in-a-directory-36op</link>
      <guid>https://dev.to/lgtome/how-count-up-lines-in-a-directory-36op</guid>
      <description>&lt;h2&gt;
  
  
  Description
&lt;/h2&gt;

&lt;p&gt;Quick overview of counting up lines inside the directory for all files.&lt;/p&gt;

&lt;h2&gt;
  
  
  CLI
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;find &lt;span class="s2"&gt;"&lt;/span&gt;&lt;span class="nv"&gt;$1&lt;/span&gt;&lt;span class="s2"&gt;"&lt;/span&gt; &lt;span class="nt"&gt;-type&lt;/span&gt; f &lt;span class="nt"&gt;-exec&lt;/span&gt; &lt;span class="nb"&gt;cat&lt;/span&gt; &lt;span class="o"&gt;{}&lt;/span&gt; + | &lt;span class="nb"&gt;wc&lt;/span&gt; &lt;span class="nt"&gt;-l&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  ZSH or Bash config
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;clines&lt;span class="o"&gt;()&lt;/span&gt; &lt;span class="o"&gt;{&lt;/span&gt;
  &lt;span class="k"&gt;if&lt;/span&gt; &lt;span class="o"&gt;[&lt;/span&gt; &lt;span class="nt"&gt;-z&lt;/span&gt; &lt;span class="s2"&gt;"&lt;/span&gt;&lt;span class="nv"&gt;$1&lt;/span&gt;&lt;span class="s2"&gt;"&lt;/span&gt; &lt;span class="o"&gt;]&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="k"&gt;then
    &lt;/span&gt;&lt;span class="nb"&gt;echo&lt;/span&gt; &lt;span class="s2"&gt;"Provider folder argument please."&lt;/span&gt;
  &lt;span class="k"&gt;else
    &lt;/span&gt;find &lt;span class="s2"&gt;"&lt;/span&gt;&lt;span class="nv"&gt;$1&lt;/span&gt;&lt;span class="s2"&gt;"&lt;/span&gt; &lt;span class="nt"&gt;-type&lt;/span&gt; f &lt;span class="nt"&gt;-exec&lt;/span&gt; &lt;span class="nb"&gt;cat&lt;/span&gt; &lt;span class="o"&gt;{}&lt;/span&gt; + | &lt;span class="nb"&gt;wc&lt;/span&gt; &lt;span class="nt"&gt;-l&lt;/span&gt;
  &lt;span class="k"&gt;fi&lt;/span&gt;
&lt;span class="o"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Thanks for your attention. Be happy.&lt;/p&gt;

</description>
      <category>linux</category>
      <category>archlinux</category>
      <category>bash</category>
      <category>programming</category>
    </item>
    <item>
      <title>NestJs Prisma Logs</title>
      <dc:creator>Denys</dc:creator>
      <pubDate>Tue, 11 Feb 2025 07:12:21 +0000</pubDate>
      <link>https://dev.to/lgtome/nestjs-prisma-logs-4926</link>
      <guid>https://dev.to/lgtome/nestjs-prisma-logs-4926</guid>
      <description>&lt;h2&gt;
  
  
  Problematic
&lt;/h2&gt;

&lt;p&gt;The main reason for this post is &lt;code&gt;types&lt;/code&gt; in &lt;code&gt;prisma&lt;/code&gt; client for logs.&lt;/p&gt;

&lt;h2&gt;
  
  
  Issue preview
&lt;/h2&gt;

&lt;p&gt;Default &lt;code&gt;prisma&lt;/code&gt; service to use in &lt;code&gt;nestjs&lt;/code&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;Injectable&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;OnModuleDestroy&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;OnModuleInit&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;@nestjs/common&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;
&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;PrismaClient&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;@prisma/client&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;

&lt;span class="p"&gt;@&lt;/span&gt;&lt;span class="nd"&gt;Injectable&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt;
&lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="kd"&gt;class&lt;/span&gt; &lt;span class="nc"&gt;PrismaService&lt;/span&gt;
    &lt;span class="kd"&gt;extends&lt;/span&gt; &lt;span class="nc"&gt;PrismaClient&lt;/span&gt; &lt;span class="k"&gt;implements&lt;/span&gt; &lt;span class="nx"&gt;OnModuleInit&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;OnModuleDestroy&lt;/span&gt;
&lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;async&lt;/span&gt; &lt;span class="nf"&gt;onModuleDestroy&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;$disconnect&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt;

    &lt;span class="k"&gt;async&lt;/span&gt; &lt;span class="nf"&gt;onModuleInit&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;$connect&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;But what about logs...&lt;/p&gt;

&lt;h2&gt;
  
  
  Control logs
&lt;/h2&gt;

&lt;p&gt;We can add a constructor with super call and control logs like:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="nf"&gt;constructor&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="k"&gt;super&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt;
            &lt;span class="na"&gt;log&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;
                &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;emit&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;event&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;level&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;query&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt; &lt;span class="p"&gt;},&lt;/span&gt;
                &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;emit&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;stdout&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;level&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;info&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt; &lt;span class="p"&gt;},&lt;/span&gt;
                &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;emit&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;stdout&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;level&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;warn&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt; &lt;span class="p"&gt;},&lt;/span&gt;
                &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;emit&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;stdout&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;level&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;error&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt; &lt;span class="p"&gt;},&lt;/span&gt;
            &lt;span class="p"&gt;],&lt;/span&gt;
            &lt;span class="na"&gt;errorFormat&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;pretty&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
        &lt;span class="p"&gt;})&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;And we are faced with &lt;code&gt;emit: event&lt;/code&gt;, so what does it mean in this case?&lt;br&gt;
The default &lt;code&gt;stdout&lt;/code&gt; just brings the message to the console and we no need to control it, but what with &lt;code&gt;event&lt;/code&gt;?&lt;/p&gt;
&lt;h2&gt;
  
  
  Event
&lt;/h2&gt;

&lt;p&gt;Event property is used for an &lt;code&gt;event-based&lt;/code&gt; message approach. So in our case, we use an event to send an event and use a listener to catch the event and provide some log or even middleware. &lt;/p&gt;
&lt;h2&gt;
  
  
  Solution
&lt;/h2&gt;

&lt;p&gt;We provide &lt;code&gt;emit: event&lt;/code&gt; in the constructor to send events instead of sending them directly to the console.&lt;/p&gt;

&lt;p&gt;And now we can catch our events like:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;$on&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;query&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;event&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
            &lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;logger&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s2"&gt;`[Duration]: &lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt;&lt;span class="nx"&gt;event&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;duration&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="s2"&gt; ms`&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
            &lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;logger&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s2"&gt;`[Timestamp]: &lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt;&lt;span class="nx"&gt;event&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;timestamp&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="s2"&gt;`&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
            &lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;logger&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s2"&gt;`[Query]: &lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt;&lt;span class="nx"&gt;event&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;query&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="s2"&gt;`&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
        &lt;span class="p"&gt;})&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;And also we faced another error regarding &lt;code&gt;types&lt;/code&gt;....&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="nx"&gt;The&lt;/span&gt; &lt;span class="nx"&gt;argument&lt;/span&gt; &lt;span class="k"&gt;of&lt;/span&gt; &lt;span class="kd"&gt;type&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;"query"&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt; &lt;span class="k"&gt;is&lt;/span&gt; &lt;span class="nx"&gt;not&lt;/span&gt; &lt;span class="nx"&gt;assignable&lt;/span&gt; &lt;span class="nx"&gt;to&lt;/span&gt; &lt;span class="nx"&gt;parameter&lt;/span&gt; &lt;span class="k"&gt;of&lt;/span&gt; &lt;span class="kd"&gt;type&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;never&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;ts&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;2345&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Remember extends:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="p"&gt;...&lt;/span&gt; &lt;span class="nx"&gt;PrismaService&lt;/span&gt; &lt;span class="kd"&gt;extends&lt;/span&gt; &lt;span class="nx"&gt;PrismaClient&lt;/span&gt; &lt;span class="p"&gt;...&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;there is no default generic for logs, so we need to add it:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="nx"&gt;PrismaClient&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;Prisma&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;PrismaClientOptions&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;Prisma&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;LogLevel&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;and it's DONE!&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fmedia2.giphy.com%2Fmedia%2Fv1.Y2lkPTc5MGI3NjExYjR1NnN0NWVvczZsNncxNWdmeWVrMHMxZWM0NWQyZmwycHc4OXFvcyZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw%2FtHIRLHtNwxpjIFqPdV%2Fgiphy.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fmedia2.giphy.com%2Fmedia%2Fv1.Y2lkPTc5MGI3NjExYjR1NnN0NWVvczZsNncxNWdmeWVrMHMxZWM0NWQyZmwycHc4OXFvcyZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw%2FtHIRLHtNwxpjIFqPdV%2Fgiphy.gif" width="240" height="240"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Full code example:&lt;/strong&gt; &lt;a href="https://gist.github.com/lgtome/e05973fe289bef32ca5ccaa0247fe7ee" rel="noopener noreferrer"&gt;https://gist.github.com/lgtome/e05973fe289bef32ca5ccaa0247fe7ee&lt;/a&gt;&lt;/p&gt;

</description>
      <category>nestjs</category>
      <category>javascript</category>
      <category>typescript</category>
      <category>backend</category>
    </item>
    <item>
      <title>Learn React composition in 15 minutes</title>
      <dc:creator>Denys</dc:creator>
      <pubDate>Thu, 30 May 2024 20:43:05 +0000</pubDate>
      <link>https://dev.to/lgtome/react-components-composition-2djl</link>
      <guid>https://dev.to/lgtome/react-components-composition-2djl</guid>
      <description>&lt;h2&gt;
  
  
  Motivation
&lt;/h2&gt;

&lt;p&gt;I used to use &lt;code&gt;React&lt;/code&gt; UI libraries such as &lt;code&gt;MUI&lt;/code&gt; or &lt;code&gt;Chakra&lt;/code&gt; or something else. Some of these libraries create components in a composition way, so today I want to describe the way how you can do it in your project with your own realization.&lt;/p&gt;

&lt;p&gt;Let's grab some coffee and let's go.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://i.giphy.com/media/v1.Y2lkPTc5MGI3NjExM2ZwbnR3YW8zZ2ppNzlyMnVjdXk4aWw1a3ZzZGxldzlvbGo3cW15OCZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/3o6ozw0cY70PJXQGBO/giphy.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://i.giphy.com/media/v1.Y2lkPTc5MGI3NjExM2ZwbnR3YW8zZ2ppNzlyMnVjdXk4aWw1a3ZzZGxldzlvbGo3cW15OCZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/3o6ozw0cY70PJXQGBO/giphy.gif" width="480" height="343"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Sorry for the gif, though :D&lt;/em&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Prerequisites
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;&lt;code&gt;React&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;&lt;em&gt;coffee &lt;strong&gt;||&lt;/strong&gt; tea&lt;/em&gt;&lt;/li&gt;
&lt;li&gt;&lt;em&gt;good attitude&lt;/em&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Composition
&lt;/h2&gt;

&lt;p&gt;A couple of words about composition, simple explanation: &lt;em&gt;combining smaller, independent components to create complex UIs&lt;/em&gt;.&lt;/p&gt;

&lt;h2&gt;
  
  
  Why?
&lt;/h2&gt;

&lt;p&gt;From the explanation, combining some components to create a complex UI, or, in some cases, creating an independent group of components to handle its ecosystem.&lt;/p&gt;

&lt;h2&gt;
  
  
  Simple composition example
&lt;/h2&gt;

&lt;p&gt;So firstly we need to run a new react project. The way I done with it:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;code&gt;yarn init -y&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;&lt;code&gt;yarn add react react-dom vite&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;&lt;code&gt;yarn add -D typescript @types/react-dom @types/react&lt;/code&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Then I created a typescript config file:&lt;br&gt;
&lt;strong&gt;tsconfig.json&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight json"&gt;&lt;code&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"compilerOptions"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
        &lt;/span&gt;&lt;span class="nl"&gt;"outDir"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"build/dist"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
        &lt;/span&gt;&lt;span class="nl"&gt;"module"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"NodeNext"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
        &lt;/span&gt;&lt;span class="nl"&gt;"target"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"es6"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
        &lt;/span&gt;&lt;span class="nl"&gt;"lib"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="s2"&gt;"es6"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"dom"&lt;/span&gt;&lt;span class="p"&gt;],&lt;/span&gt;&lt;span class="w"&gt;
        &lt;/span&gt;&lt;span class="nl"&gt;"jsx"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"react-jsx"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
        &lt;/span&gt;&lt;span class="nl"&gt;"moduleResolution"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"NodeNext"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
        &lt;/span&gt;&lt;span class="nl"&gt;"rootDir"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"src"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
        &lt;/span&gt;&lt;span class="nl"&gt;"noImplicitReturns"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="kc"&gt;true&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
        &lt;/span&gt;&lt;span class="nl"&gt;"noImplicitThis"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="kc"&gt;true&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
        &lt;/span&gt;&lt;span class="nl"&gt;"noImplicitAny"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="kc"&gt;true&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
        &lt;/span&gt;&lt;span class="nl"&gt;"strictNullChecks"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="kc"&gt;true&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="p"&gt;},&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"exclude"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="s2"&gt;"node_modules"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"build"&lt;/span&gt;&lt;span class="p"&gt;],&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"include"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="s2"&gt;"src/**/*"&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;and &lt;code&gt;index.html&lt;/code&gt; in the root of repository, following &lt;code&gt;vite&lt;/code&gt; doc&lt;br&gt;
&lt;strong&gt;index.html&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight html"&gt;&lt;code&gt;&lt;span class="cp"&gt;&amp;lt;!DOCTYPE html&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;html&lt;/span&gt; &lt;span class="na"&gt;lang=&lt;/span&gt;&lt;span class="s"&gt;"en"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;

&lt;span class="nt"&gt;&amp;lt;head&amp;gt;&lt;/span&gt;
  &lt;span class="nt"&gt;&amp;lt;meta&lt;/span&gt; &lt;span class="na"&gt;charset=&lt;/span&gt;&lt;span class="s"&gt;"UTF-8"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
  &lt;span class="nt"&gt;&amp;lt;meta&lt;/span&gt; &lt;span class="na"&gt;name=&lt;/span&gt;&lt;span class="s"&gt;"viewport"&lt;/span&gt; &lt;span class="na"&gt;content=&lt;/span&gt;&lt;span class="s"&gt;"width=device-width, initial-scale=1.0"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
  &lt;span class="nt"&gt;&amp;lt;title&amp;gt;&lt;/span&gt;React Composition Example&lt;span class="nt"&gt;&amp;lt;/title&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;/head&amp;gt;&lt;/span&gt;

&lt;span class="nt"&gt;&amp;lt;body&amp;gt;&lt;/span&gt;
  &lt;span class="nt"&gt;&amp;lt;div&lt;/span&gt; &lt;span class="na"&gt;id=&lt;/span&gt;&lt;span class="s"&gt;"root"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&amp;lt;/div&amp;gt;&lt;/span&gt;
  &lt;span class="nt"&gt;&amp;lt;script &lt;/span&gt;&lt;span class="na"&gt;type=&lt;/span&gt;&lt;span class="s"&gt;"module"&lt;/span&gt; &lt;span class="na"&gt;src=&lt;/span&gt;&lt;span class="s"&gt;"/src/index.tsx"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&amp;lt;/script&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;/body&amp;gt;&lt;/span&gt;

&lt;span class="nt"&gt;&amp;lt;/html&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;and also the &lt;code&gt;index.tsx&lt;/code&gt; file to run our &lt;code&gt;React&lt;/code&gt;&lt;br&gt;
&lt;strong&gt;index.tsx&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;createRoot&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;react-dom/client&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;
&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;App&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;./App&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;

&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;root&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;createRoot&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nb"&gt;document&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;getElementById&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;root&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="k"&gt;as&lt;/span&gt; &lt;span class="nx"&gt;HTMLDivElement&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;span class="nx"&gt;root&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;render&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;App&lt;/span&gt; &lt;span class="o"&gt;/&amp;gt;&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;and the &lt;code&gt;App.tsx&lt;/code&gt; as an entry point for our app.&lt;br&gt;
&lt;strong&gt;App.tsx&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="nx"&gt;React&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;react&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;
&lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;App&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;return &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
        &lt;span class="o"&gt;&amp;lt;&amp;gt;&lt;/span&gt;
           &lt;span class="nx"&gt;Hi&lt;/span&gt; &lt;span class="nx"&gt;there&lt;/span&gt;&lt;span class="o"&gt;!&lt;/span&gt;
        &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;    &lt;span class="p"&gt;)&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;So now we can add a script to the &lt;code&gt;package.json&lt;/code&gt; and run the app:&lt;br&gt;
&lt;strong&gt;package.json&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight json"&gt;&lt;code&gt;&lt;span class="err"&gt;//...&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="nl"&gt;"scripts"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"dev"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"vite"&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;span class="err"&gt;//...&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;So where are we? We created a simple react app with vite and we can run it.&lt;/p&gt;

&lt;p&gt;Now we need to create a folder, I named &lt;code&gt;Composition&lt;/code&gt;, where we will store all our composition files.&lt;/p&gt;

&lt;p&gt;I created a simple &lt;code&gt;types.ts&lt;/code&gt; file for shared types between composition files.&lt;br&gt;
&lt;strong&gt;types.ts&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;FC&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;PropsWithChildren&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;react&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;

&lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="kd"&gt;type&lt;/span&gt; &lt;span class="nx"&gt;FCWithChildren&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;T&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;FC&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;PropsWithChildren&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;T&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;just for having children with &lt;code&gt;FC&lt;/code&gt; type.&lt;/p&gt;

&lt;p&gt;Then I created 3 components, &lt;code&gt;Head&lt;/code&gt;, &lt;code&gt;Footer&lt;/code&gt;, &lt;code&gt;Body&lt;/code&gt; and &lt;code&gt;Wrapper&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;I will share it further, but for now, we need to create a main logic with &lt;code&gt;Provider&lt;/code&gt; and &lt;code&gt;Context&lt;/code&gt; itself.&lt;/p&gt;

&lt;p&gt;So, I created a file called &lt;code&gt;Context.tsx&lt;/code&gt;&lt;br&gt;
&lt;strong&gt;Context.tsx&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;createContext&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;Dispatch&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;SetStateAction&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;useContext&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;useState&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;react&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;
&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;FCWithChildren&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;./types&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;

&lt;span class="kr"&gt;interface&lt;/span&gt; &lt;span class="nx"&gt;ContextState&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nl"&gt;initialContext&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;boolean&lt;/span&gt;
    &lt;span class="nx"&gt;data&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;unknown&lt;/span&gt;&lt;span class="p"&gt;[]&lt;/span&gt;
    &lt;span class="nx"&gt;setData&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;Dispatch&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;SetStateAction&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;ContextState&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;data&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&amp;gt;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;CompositionContext&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;createContext&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;ContextState&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt; &lt;span class="na"&gt;initialContext&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kc"&gt;true&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;as&lt;/span&gt; &lt;span class="nx"&gt;ContextState&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;

&lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;useCompositionContext&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;context&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;useContext&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;CompositionContext&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;

    &lt;span class="k"&gt;if &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;context&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;initialContext&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="k"&gt;throw&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nc"&gt;Error&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Use context inside provider.&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt;

    &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nx"&gt;context&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;CompositionContextProvider&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;FCWithChildren&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;unknown&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;({&lt;/span&gt; &lt;span class="nx"&gt;children&lt;/span&gt; &lt;span class="p"&gt;})&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;data&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;setData&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;useState&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;unknown&lt;/span&gt;&lt;span class="p"&gt;[]&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;&lt;span class="p"&gt;([])&lt;/span&gt;
    &lt;span class="k"&gt;return &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
        &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;CompositionContext&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;Provider&lt;/span&gt; &lt;span class="nx"&gt;value&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="p"&gt;{{&lt;/span&gt; &lt;span class="na"&gt;initialContext&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kc"&gt;false&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;data&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;setData&lt;/span&gt; &lt;span class="p"&gt;}}&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;
            &lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;children&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;
        &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/CompositionContext.Provider&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;    &lt;span class="p"&gt;)&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The key points of this file are:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;this file has an interface for context&lt;/li&gt;
&lt;li&gt;this file has &lt;code&gt;CompositionContextProvider&lt;/code&gt; to provide the context to nested components&lt;/li&gt;
&lt;li&gt;this file has &lt;code&gt;useCompositionContext&lt;/code&gt; function, which we will invoke in our nested under &lt;code&gt;CompositionContextProvider&lt;/code&gt; components&lt;/li&gt;
&lt;li&gt;simple condition statement, but I will describe it more little bit later&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://i.giphy.com/media/v1.Y2lkPTc5MGI3NjExM2tidGdpdTdhcnJoeml5Mzh0cHFteGtpZWViazQ1M3VjNWQ2MGJzZSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/5Jnzd5fuvipfZa4797/giphy.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://i.giphy.com/media/v1.Y2lkPTc5MGI3NjExM2tidGdpdTdhcnJoeml5Mzh0cHFteGtpZWViazQ1M3VjNWQ2MGJzZSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/5Jnzd5fuvipfZa4797/giphy.gif" width="480" height="480"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;So now time to create nested components to use the context.&lt;br&gt;
&lt;strong&gt;Head.tsx&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="nx"&gt;React&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;FC&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;react&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;
&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;useCompositionContext&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;./Context&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;

&lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;Head&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;FC&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;order&lt;/span&gt;&lt;span class="p"&gt;?:&lt;/span&gt; &lt;span class="kr"&gt;number&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;({&lt;/span&gt; &lt;span class="nx"&gt;order&lt;/span&gt; &lt;span class="p"&gt;})&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;context&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;useCompositionContext&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt;

    &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;div&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;&lt;span class="nx"&gt;Head&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/div&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;Footer.tsx&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="nx"&gt;React&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;react&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;
&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;useCompositionContext&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;./Context&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;

&lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;Footer&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;context&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;useCompositionContext&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt;
    &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;div&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;&lt;span class="nx"&gt;Footer&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/div&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;Body.tsx&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="nx"&gt;React&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;react&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;
&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;useCompositionContext&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;./Context&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;

&lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;Body&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;context&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;useCompositionContext&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt;
    &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;div&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;&lt;span class="nx"&gt;Body&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/div&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Also, I created an &lt;code&gt;index.tsx&lt;/code&gt; for re-exporting our composition and assigning it to the constant.&lt;br&gt;
&lt;strong&gt;Composition/index.tsx&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;Body&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;./Body&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;
&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;Footer&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;./Footer&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;
&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;Head&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;./Head&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;
&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;Wrapper&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;./Wrapper&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;

&lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;Composition&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;Body&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;Footer&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;Head&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;Wrapper&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Also, I created a &lt;code&gt;Wrapper.tsx&lt;/code&gt; file to compose our components with context.&lt;br&gt;
&lt;strong&gt;Wrapper.tsx&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="nx"&gt;React&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;react&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;
&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;FCWithChildren&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;./types&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;
&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;CompositionContextProvider&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;./Context&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;

&lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;Wrapper&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;FCWithChildren&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;unknown&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;({&lt;/span&gt; &lt;span class="nx"&gt;children&lt;/span&gt; &lt;span class="p"&gt;})&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;CompositionContextProvider&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;children&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/CompositionContextProvider&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;and also the last one &lt;code&gt;Layout.tsx&lt;/code&gt; to render our components:&lt;br&gt;
&lt;strong&gt;Layout.tsx&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="nx"&gt;React&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;react&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;
&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;Composition&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;.&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;

&lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;CompositionLayout&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;return &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
        &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;Composition&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;Wrapper&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;
            &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;Composition&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;Head&lt;/span&gt; &lt;span class="o"&gt;/&amp;gt;&lt;/span&gt;
            &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;Composition&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;Body&lt;/span&gt; &lt;span class="o"&gt;/&amp;gt;&lt;/span&gt;
            &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;Composition&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;Footer&lt;/span&gt; &lt;span class="o"&gt;/&amp;gt;&lt;/span&gt;
        &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/Composition.Wrapper&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;    &lt;span class="p"&gt;)&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Now it is time to modify &lt;code&gt;App.tsx&lt;/code&gt; file to apply our changes from the composition.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;App.tsx&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="nx"&gt;React&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;react&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;
&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;CompositionLayout&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;./Composition/CompositionLayout&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;

&lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;App&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;return &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
        &lt;span class="o"&gt;&amp;lt;&amp;gt;&lt;/span&gt;
           &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;CompositionLayout&lt;/span&gt; &lt;span class="o"&gt;/&amp;gt;&lt;/span&gt;
        &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;    &lt;span class="p"&gt;)&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;As I said above we have the condition and now this is an explanation why.&lt;/p&gt;

&lt;p&gt;This condition:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="k"&gt;if &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;context&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;initialContext&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="k"&gt;throw&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nc"&gt;Error&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Use context inside provider.&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;was about to prevent using components outside the provider,&lt;br&gt;
so if we try to use it outside.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://i.giphy.com/media/v1.Y2lkPTc5MGI3NjExMWZuODdscmNvcHJmYmZpZXN3bW5sb3p2NnE5Mjg3MmI0dmtiNmtzaiZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/daOkKrzlWaKXtZxxwW/giphy-downsized-large.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://i.giphy.com/media/v1.Y2lkPTc5MGI3NjExMWZuODdscmNvcHJmYmZpZXN3bW5sb3p2NnE5Mjg3MmI0dmtiNmtzaiZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/daOkKrzlWaKXtZxxwW/giphy-downsized-large.gif" width="480" height="480"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;App.tsx&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="nx"&gt;React&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;react&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;
&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;CompositionLayout&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;./Composition/CompositionLayout&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;
&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;Composition&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;./Composition&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;

&lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;App&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;return &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
        &lt;span class="o"&gt;&amp;lt;&amp;gt;&lt;/span&gt;
            &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;CompositionLayout&lt;/span&gt; &lt;span class="o"&gt;/&amp;gt;&lt;/span&gt;
            &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;Composition&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;Head&lt;/span&gt; &lt;span class="o"&gt;/&amp;gt;&lt;/span&gt;
        &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;    &lt;span class="p"&gt;)&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;we get an error from our &lt;code&gt;throw new Error(...)&lt;/code&gt;, cuz we trying to use it outside.&lt;/p&gt;

&lt;h2&gt;
  
  
  GitHub
&lt;/h2&gt;

&lt;p&gt;Repository from article: &lt;a href="https://github.com/lgtome/react-composition" rel="noopener noreferrer"&gt;https://github.com/lgtome/react-composition&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Outro
&lt;/h2&gt;

&lt;p&gt;I will be glad to see your comments, some enhancements, questions, and concerns.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://i.giphy.com/media/v1.Y2lkPTc5MGI3NjExanFpOWZ3ZjUyMXppNXBxbzlvbGcxMnhudHNmZGE2NDkzem9wa3hjdiZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/osjgQPWRx3cac/giphy.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://i.giphy.com/media/v1.Y2lkPTc5MGI3NjExanFpOWZ3ZjUyMXppNXBxbzlvbGcxMnhudHNmZGE2NDkzem9wa3hjdiZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/osjgQPWRx3cac/giphy.gif" width="500" height="500"&gt;&lt;/a&gt;&lt;/p&gt;

</description>
      <category>react</category>
      <category>javascript</category>
      <category>typescript</category>
      <category>webdev</category>
    </item>
    <item>
      <title>Function tricks</title>
      <dc:creator>Denys</dc:creator>
      <pubDate>Thu, 30 May 2024 19:12:41 +0000</pubDate>
      <link>https://dev.to/lgtome/function-tricks-11aa</link>
      <guid>https://dev.to/lgtome/function-tricks-11aa</guid>
      <description>&lt;h2&gt;
  
  
  Motivation
&lt;/h2&gt;

&lt;p&gt;Some JS features are hidden under the hood or veiled under some expressions, etc.&lt;/p&gt;

&lt;p&gt;This article is about to enlighten some features or approaches that are not on the surface.&lt;/p&gt;

&lt;h2&gt;
  
  
  Prerequisites
&lt;/h2&gt;

&lt;p&gt;JS knowledge and that's all.&lt;/p&gt;

&lt;h2&gt;
  
  
  Case #1
&lt;/h2&gt;

&lt;p&gt;We have a simple code:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;test&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;a&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="nx"&gt;b&lt;/span&gt;&lt;span class="p"&gt;){&lt;/span&gt;
  &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="na"&gt;sum&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;a&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="nx"&gt;b&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="na"&gt;multiplied&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;a&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt; &lt;span class="nx"&gt;b&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This function just returns an object with &lt;em&gt;sum&lt;/em&gt; and &lt;em&gt;multiplied&lt;/em&gt; values.&lt;/p&gt;

&lt;p&gt;We can invoke the function like:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nf"&gt;test&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="mi"&gt;2&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="c1"&gt;// -&amp;gt; {sum: 3, multiplied: 2}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;But also we can modify our function to:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;test&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;a&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="nx"&gt;b&lt;/span&gt;&lt;span class="p"&gt;){&lt;/span&gt;
  &lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;sum&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;a&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="nx"&gt;b&lt;/span&gt;
  &lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;multiplied&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;a&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt; &lt;span class="nx"&gt;b&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;In this case, we have no return statement, but in the return of invocation like this:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nf"&gt;test&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="mi"&gt;2&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;we will have the same structure, smth like this:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nx"&gt;test&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nl"&gt;sum&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;3&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="nx"&gt;multiplied&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;2&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="nx"&gt;__proto__&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nl"&gt;constructor&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;ƒ&lt;/span&gt; &lt;span class="nf"&gt;test&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Case #2
&lt;/h2&gt;

&lt;p&gt;The typical way to invoke the function:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="c1"&gt;//....&lt;/span&gt;
&lt;span class="nf"&gt;testFunction&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;a&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="nx"&gt;b&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="nx"&gt;c&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;but we have another method to invoke if we have no args(e.g):&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;test&lt;/span&gt;&lt;span class="p"&gt;(){&lt;/span&gt;
  &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;message&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Hi there!&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;data&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nx"&gt;test&lt;/span&gt;

&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;data&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;message&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="c1"&gt;// -&amp;gt; "Hi there!"&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;a href="https://i.giphy.com/media/v1.Y2lkPTc5MGI3NjExc3Jmamw5eml2czduOGticmN1d3ZlbWU2M2NvMmJqa21tMDgzbTQ4ayZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/9UmAh3S9S6krqCkZ9p/giphy.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://i.giphy.com/media/v1.Y2lkPTc5MGI3NjExc3Jmamw5eml2czduOGticmN1d3ZlbWU2M2NvMmJqa21tMDgzbTQ4ayZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/9UmAh3S9S6krqCkZ9p/giphy.gif" width="480" height="480"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Case #3
&lt;/h2&gt;

&lt;p&gt;The regular way that we can use it provides the object on the return statement inside the function, but we can use it outside if we need it.&lt;/p&gt;

&lt;p&gt;Regular:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;test&lt;/span&gt;&lt;span class="p"&gt;(){&lt;/span&gt;
  &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;message&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Hi there!&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nf"&gt;test&lt;/span&gt;&lt;span class="p"&gt;())&lt;/span&gt; &lt;span class="c1"&gt;// -&amp;gt; "Hi there!"&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Weird, but possible:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;test&lt;/span&gt;&lt;span class="p"&gt;(){&lt;/span&gt;
  &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;message&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Hi there!&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="nx"&gt;test&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;useTest&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="kd"&gt;function&lt;/span&gt;&lt;span class="p"&gt;(){&lt;/span&gt;
  &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;test&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;useTest&lt;/span&gt;&lt;span class="p"&gt;())&lt;/span&gt; &lt;span class="c1"&gt;// -&amp;gt; "Hi there!"&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;for example in &lt;code&gt;React&lt;/code&gt; we can use this approach for compositing our components.&lt;/p&gt;

&lt;h2&gt;
  
  
  Conclusion
&lt;/h2&gt;

&lt;p&gt;JS is tricky and not as simple as it looks.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://i.giphy.com/media/v1.Y2lkPTc5MGI3NjExbjNtZ3NpeDBjaDV4MnFrdWxrbHQ5ZmtrdzNjN3Bob2JqNWJhbzMyNiZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/5qlnl8qqLVekKaZaKC/giphy.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://i.giphy.com/media/v1.Y2lkPTc5MGI3NjExbjNtZ3NpeDBjaDV4MnFrdWxrbHQ5ZmtrdzNjN3Bob2JqNWJhbzMyNiZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/5qlnl8qqLVekKaZaKC/giphy.gif" width="480" height="480"&gt;&lt;/a&gt;&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>typescript</category>
      <category>webdev</category>
      <category>programming</category>
    </item>
    <item>
      <title>WHY Typescript is the liar</title>
      <dc:creator>Denys</dc:creator>
      <pubDate>Thu, 23 May 2024 18:01:27 +0000</pubDate>
      <link>https://dev.to/lgtome/typescript-reliability-nb4</link>
      <guid>https://dev.to/lgtome/typescript-reliability-nb4</guid>
      <description>&lt;h2&gt;
  
  
  Motivation
&lt;/h2&gt;

&lt;p&gt;Sometimes I hear from people such an amazing opinion about &lt;code&gt;typescript&lt;/code&gt; and the reliability of this. My motivation is to clarify some cases, cuz our best language is becoming modern every day and we use some things that we couldn't use a couple of years ago.&lt;/p&gt;

&lt;h2&gt;
  
  
  Prerequisites
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;&lt;code&gt;typescript&lt;/code&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Cases
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;First&lt;/strong&gt; and my favorite is &lt;code&gt;ts&lt;/code&gt; and &lt;code&gt;Map&lt;/code&gt;:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;map&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nb"&gt;Map&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="kr"&gt;string&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="kr"&gt;string&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt;

&lt;span class="nx"&gt;map&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;set&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;tsIsAmazing&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;thinkNot&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;

&lt;span class="c1"&gt;// some&lt;/span&gt;
&lt;span class="c1"&gt;// a lot of&lt;/span&gt;
&lt;span class="c1"&gt;// code&lt;/span&gt;
&lt;span class="c1"&gt;// here&lt;/span&gt;

&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;data&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{...&lt;/span&gt;&lt;span class="nx"&gt;map&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="nx"&gt;data&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;set&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;isItWillWork&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;NOPE&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;In this case, we have no errors from the typescript in the last line, but if we run this code it will bring an exception like: &lt;code&gt;data.set is not a function&lt;/code&gt;. Be careful&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Second&lt;/strong&gt;:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;merge&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;T&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;F&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;source&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;T&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;target&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;F&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;({...&lt;/span&gt;&lt;span class="nx"&gt;source&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;...&lt;/span&gt;&lt;span class="nx"&gt;target&lt;/span&gt;&lt;span class="p"&gt;});&lt;/span&gt;

&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;str&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="na"&gt;func&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;42&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;};&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;num&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="na"&gt;func&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="mi"&gt;42&lt;/span&gt;&lt;span class="p"&gt;};&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;fn&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="na"&gt;func&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nb"&gt;Function&lt;/span&gt;&lt;span class="p"&gt;};&lt;/span&gt;

&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;merged&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;merge&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;str&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nf"&gt;merge&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;num&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;fn&lt;/span&gt;&lt;span class="p"&gt;)).&lt;/span&gt;&lt;span class="nf"&gt;func&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt;
&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;merged&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;You can guess what will me in the last &lt;code&gt;console.log&lt;/code&gt;, but, sadly it will be a &lt;code&gt;string&lt;/code&gt; (as typescript guessing), but in the runtime, it will be &lt;code&gt;Function&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Third&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;test&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="kc"&gt;NaN&lt;/span&gt; &lt;span class="k"&gt;as&lt;/span&gt; &lt;span class="kd"&gt;const&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;It will throw an &lt;code&gt;ts&lt;/code&gt; exception like: &lt;code&gt;A 'const' assertions can only be applied to references to enum members, or string, number, boolean, array, or object literals.(1355)&lt;/code&gt;, but from the typescript: &lt;code&gt;var NaN: number&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Fourth&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="kd"&gt;class&lt;/span&gt; &lt;span class="nc"&gt;Person&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nl"&gt;age&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;number&lt;/span&gt;
  &lt;span class="nf"&gt;constructor&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;age&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="kr"&gt;number&lt;/span&gt;&lt;span class="p"&gt;){&lt;/span&gt;
    &lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;age&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;age&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;

  &lt;span class="nf"&gt;getAge&lt;/span&gt;&lt;span class="p"&gt;(){&lt;/span&gt;
    &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;age&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;getAge&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nc"&gt;Person&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;18&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;

&lt;span class="nf"&gt;getAge&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Looks like normal code, but in this case, we will have an error from the &lt;code&gt;getAge&lt;/code&gt; invocation like: &lt;code&gt;Cannot read properties of undefined (reading 'age')&lt;/code&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Outro
&lt;/h2&gt;

&lt;p&gt;There are a lot of cases like this and a lot of issues in &lt;code&gt;ts&lt;/code&gt; repo, this is only 4th and I can write more and more but it's not my point. My point is to keep in touch with ourselves that typescript is not safe and not reliable in some cases.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://i.giphy.com/media/v1.Y2lkPTc5MGI3NjExY2dqajE4czhuYnFnajRvbHVkdnBwcW1ocXZiZW41YWtrcGx3Z2lhOCZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/2KAGlmkPywhZS/giphy.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://i.giphy.com/media/v1.Y2lkPTc5MGI3NjExY2dqajE4czhuYnFnajRvbHVkdnBwcW1ocXZiZW41YWtrcGx3Z2lhOCZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/2KAGlmkPywhZS/giphy.gif" width="364" height="708"&gt;&lt;/a&gt;&lt;/p&gt;

</description>
      <category>typescript</category>
      <category>javascript</category>
      <category>webdev</category>
      <category>learning</category>
    </item>
    <item>
      <title>react-dropzone with web worker</title>
      <dc:creator>Denys</dc:creator>
      <pubDate>Thu, 23 May 2024 01:14:28 +0000</pubDate>
      <link>https://dev.to/lgtome/react-dropzone-with-web-worker-mh1</link>
      <guid>https://dev.to/lgtome/react-dropzone-with-web-worker-mh1</guid>
      <description>&lt;h2&gt;
  
  
  Motivation
&lt;/h2&gt;

&lt;p&gt;Once I had a weird experience with large images and some stuff like images and &lt;code&gt;react-dropzone&lt;/code&gt;. It was too laggy with large ones and it blocked some UI elements.&lt;/p&gt;

&lt;h2&gt;
  
  
  Prerequisites
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;react&lt;/strong&gt; and stuff chained with it&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;react-dropzone&lt;/strong&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Problematic
&lt;/h2&gt;

&lt;p&gt;I have written an example with the default preset for &lt;code&gt;react-dropzone&lt;/code&gt; and just trying to upload some large img.&lt;/p&gt;

&lt;p&gt;First code block (such as default preset):&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight jsx"&gt;&lt;code&gt;&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;useCallback&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;useState&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;react&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;
&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;useDropzone&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;react-dropzone&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;

&lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;Dropzone&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;state&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;setState&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;useState&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;string&lt;/span&gt; &lt;span class="o"&gt;|&lt;/span&gt; &lt;span class="kc"&gt;undefined&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kc"&gt;undefined&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
    &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;onDrop&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;useCallback&lt;/span&gt;&lt;span class="p"&gt;((&lt;/span&gt;&lt;span class="na"&gt;acceptedFiles&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;File&lt;/span&gt;&lt;span class="p"&gt;[])&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="nx"&gt;acceptedFiles&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;forEach&lt;/span&gt;&lt;span class="p"&gt;((&lt;/span&gt;&lt;span class="nx"&gt;file&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
            &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;reader&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nc"&gt;FileReader&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt;

            &lt;span class="nx"&gt;reader&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;onload&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
                &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;result&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;reader&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;result&lt;/span&gt; &lt;span class="k"&gt;as&lt;/span&gt; &lt;span class="nx"&gt;any&lt;/span&gt;

                &lt;span class="nf"&gt;setState&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;result&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
            &lt;span class="p"&gt;}&lt;/span&gt;

            &lt;span class="nx"&gt;reader&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;readAsDataURL&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;file&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
        &lt;span class="p"&gt;})&lt;/span&gt;
    &lt;span class="p"&gt;},&lt;/span&gt; &lt;span class="p"&gt;[])&lt;/span&gt;

    &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;getRootProps&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;getInputProps&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;useDropzone&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt; &lt;span class="nx"&gt;onDrop&lt;/span&gt; &lt;span class="p"&gt;})&lt;/span&gt;

    &lt;span class="k"&gt;return &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
        &lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nt"&gt;div&lt;/span&gt; &lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="p"&gt;...&lt;/span&gt;&lt;span class="nf"&gt;getRootProps&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
            &lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nt"&gt;input&lt;/span&gt; &lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="p"&gt;...&lt;/span&gt;&lt;span class="nf"&gt;getInputProps&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt; &lt;span class="p"&gt;/&amp;gt;&lt;/span&gt;
            &lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nt"&gt;p&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;Drag 'n' drop some files here, or click to select files&lt;span class="p"&gt;&amp;lt;/&lt;/span&gt;&lt;span class="nt"&gt;p&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
            &lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;state&lt;/span&gt; &lt;span class="o"&gt;&amp;amp;&amp;amp;&lt;/span&gt; &lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nt"&gt;img&lt;/span&gt; &lt;span class="na"&gt;src&lt;/span&gt;&lt;span class="p"&gt;=&lt;/span&gt;&lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;state&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt; &lt;span class="na"&gt;style&lt;/span&gt;&lt;span class="p"&gt;=&lt;/span&gt;&lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;width&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;200&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;height&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;200&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt; &lt;span class="p"&gt;/&amp;gt;&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt;
        &lt;span class="p"&gt;&amp;lt;/&lt;/span&gt;&lt;span class="nt"&gt;div&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
    &lt;span class="p"&gt;)&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;We can try to use input while we trying to upload an image and ... it's gone.&lt;br&gt;
&lt;a href="https://i.giphy.com/media/v1.Y2lkPTc5MGI3NjExOG5hcDZ2eXkwYWE1NnVsaGM1OXl1bTk3Y2RvbXd1cmU2emRjZThyMyZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/qEdbSUizkOx9MWBysO/giphy.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://i.giphy.com/media/v1.Y2lkPTc5MGI3NjExOG5hcDZ2eXkwYWE1NnVsaGM1OXl1bTk3Y2RvbXd1cmU2emRjZThyMyZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/qEdbSUizkOx9MWBysO/giphy.gif" width="480" height="360"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;So I tried many things and maybe u can provide ur own solutions to comments or will create another article about it, will appreciate it.&lt;/p&gt;
&lt;h2&gt;
  
  
  Solution
&lt;/h2&gt;

&lt;p&gt;The solution is to use &lt;code&gt;Web Worker&lt;/code&gt; to unload our operation.&lt;br&gt;
The preload by &lt;code&gt;new Image()&lt;/code&gt; does not work.&lt;br&gt;
&lt;em&gt;Web Worker has no &lt;code&gt;Image&lt;/code&gt; at all, though.&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;worker.js&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nx"&gt;onmessage&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;async&lt;/span&gt; &lt;span class="nf"&gt;function &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;event&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;response&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nf"&gt;fetch&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;event&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;data&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;result&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
    &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;blob&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nx"&gt;response&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;blob&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt;
    &lt;span class="nf"&gt;postMessage&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;URL&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;createObjectURL&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;blob&lt;/span&gt;&lt;span class="p"&gt;))&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;index.tsx&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight jsx"&gt;&lt;code&gt;&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;useCallback&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;useEffect&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;useState&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;react&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;
&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;useDropzone&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;react-dropzone&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;

&lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;Dropzone&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;state&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;setState&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;useState&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;string&lt;/span&gt; &lt;span class="o"&gt;|&lt;/span&gt; &lt;span class="kc"&gt;undefined&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kc"&gt;undefined&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
    &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;worker&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;setWorker&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;useState&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;Worker&lt;/span&gt; &lt;span class="o"&gt;|&lt;/span&gt; &lt;span class="kc"&gt;null&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kc"&gt;null&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
    &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;onDrop&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;useCallback&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
        &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="na"&gt;acceptedFiles&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;File&lt;/span&gt;&lt;span class="p"&gt;[])&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
            &lt;span class="nx"&gt;acceptedFiles&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;forEach&lt;/span&gt;&lt;span class="p"&gt;((&lt;/span&gt;&lt;span class="nx"&gt;file&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
                &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;reader&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nc"&gt;FileReader&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt;

                &lt;span class="nx"&gt;reader&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;onload&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
                    &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;result&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;reader&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;result&lt;/span&gt; &lt;span class="k"&gt;as&lt;/span&gt; &lt;span class="nx"&gt;string&lt;/span&gt;
                    &lt;span class="k"&gt;if &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;worker&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
                        &lt;span class="nx"&gt;worker&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;postMessage&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt; &lt;span class="nx"&gt;result&lt;/span&gt; &lt;span class="p"&gt;})&lt;/span&gt;
                    &lt;span class="p"&gt;}&lt;/span&gt;
                &lt;span class="p"&gt;}&lt;/span&gt;

                &lt;span class="nx"&gt;reader&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;readAsDataURL&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;file&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
            &lt;span class="p"&gt;})&lt;/span&gt;
        &lt;span class="p"&gt;},&lt;/span&gt;
        &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;worker&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt;
    &lt;span class="p"&gt;)&lt;/span&gt;

    &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;getRootProps&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;getInputProps&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;useDropzone&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt; &lt;span class="nx"&gt;onDrop&lt;/span&gt; &lt;span class="p"&gt;})&lt;/span&gt;

    &lt;span class="nf"&gt;useEffect&lt;/span&gt;&lt;span class="p"&gt;(()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;workerInstance&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nc"&gt;Worker&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nc"&gt;URL&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;worker.js&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="k"&gt;import&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;meta&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;url&lt;/span&gt;&lt;span class="p"&gt;))&lt;/span&gt;
        &lt;span class="nx"&gt;workerInstance&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;onmessage&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;function &lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt; &lt;span class="nx"&gt;data&lt;/span&gt; &lt;span class="p"&gt;})&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
            &lt;span class="nf"&gt;setState&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;data&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
        &lt;span class="p"&gt;}&lt;/span&gt;

        &lt;span class="nf"&gt;setWorker&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;workerInstance&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;

        &lt;span class="k"&gt;return &lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nx"&gt;workerInstance&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;terminate&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt;
    &lt;span class="p"&gt;},&lt;/span&gt; &lt;span class="p"&gt;[])&lt;/span&gt;
    &lt;span class="k"&gt;return &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
        &lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nt"&gt;div&lt;/span&gt; &lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="p"&gt;...&lt;/span&gt;&lt;span class="nf"&gt;getRootProps&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
            &lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nt"&gt;input&lt;/span&gt; &lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="p"&gt;...&lt;/span&gt;&lt;span class="nf"&gt;getInputProps&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt; &lt;span class="p"&gt;/&amp;gt;&lt;/span&gt;
            &lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nt"&gt;p&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;Drag 'n' drop some files here, or click to select files&lt;span class="p"&gt;&amp;lt;/&lt;/span&gt;&lt;span class="nt"&gt;p&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
            &lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;state&lt;/span&gt; &lt;span class="o"&gt;&amp;amp;&amp;amp;&lt;/span&gt; &lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nt"&gt;img&lt;/span&gt; &lt;span class="na"&gt;src&lt;/span&gt;&lt;span class="p"&gt;=&lt;/span&gt;&lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;state&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt; &lt;span class="na"&gt;style&lt;/span&gt;&lt;span class="p"&gt;=&lt;/span&gt;&lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;width&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;200&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;height&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;200&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt; &lt;span class="p"&gt;/&amp;gt;&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt;
        &lt;span class="p"&gt;&amp;lt;/&lt;/span&gt;&lt;span class="nt"&gt;div&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
    &lt;span class="p"&gt;)&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;a href="https://i.giphy.com/media/v1.Y2lkPTc5MGI3NjExMXY2bmhjbnJ0emcwdjF4MnYxdmd0dTdpNXo5bTI3YTZjemsxZ2MzeCZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/Kyeev3JgtQKXvqLvSx/giphy.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://i.giphy.com/media/v1.Y2lkPTc5MGI3NjExMXY2bmhjbnJ0emcwdjF4MnYxdmd0dTdpNXo5bTI3YTZjemsxZ2MzeCZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/Kyeev3JgtQKXvqLvSx/giphy.gif" width="480" height="270"&gt;&lt;/a&gt;&lt;/p&gt;

</description>
      <category>react</category>
      <category>webdev</category>
      <category>javascript</category>
      <category>frontend</category>
    </item>
    <item>
      <title>Node-red Interlude. Chapter 1</title>
      <dc:creator>Denys</dc:creator>
      <pubDate>Fri, 19 Apr 2024 07:26:34 +0000</pubDate>
      <link>https://dev.to/lgtome/node-red-interlude-chapter-1-4fjj</link>
      <guid>https://dev.to/lgtome/node-red-interlude-chapter-1-4fjj</guid>
      <description>&lt;p&gt;Have you heard something about node-red? Not? Check my previous &lt;a href="https://dev.to/lgtome/node-red-prelude-blind-inception-14fm"&gt;article&lt;/a&gt; out. Here we go.&lt;/p&gt;

&lt;h2&gt;
  
  
  TL;DR
&lt;/h2&gt;

&lt;p&gt;So, It's the first chapter of the "Blind Inception" trilogy.&lt;br&gt;
I wanna tell a story about some confused and perplexing things. I will use some diagrams and code examples for better understanding.&lt;/p&gt;
&lt;h2&gt;
  
  
  Prerequisites
&lt;/h2&gt;

&lt;p&gt;Hmm, I guess some knowledge of &lt;a href="https://nodejs.org/en"&gt;NodeJS&lt;/a&gt; and JS, ofc. And, ... will be good if you understand JS under the hood, but don't worry, I will explain it simply.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;node-red&lt;/li&gt;
&lt;li&gt;MongoDB&lt;/li&gt;
&lt;li&gt;NodeJS&lt;/li&gt;
&lt;/ul&gt;
&lt;h2&gt;
  
  
  For what?
&lt;/h2&gt;

&lt;p&gt;A lot of Iot devices don't have enough memory to store everything that developers want. This post is about how to save memory on IoT devices, cuz it's a main problem on IoT devices.&lt;/p&gt;
&lt;h2&gt;
  
  
  Intro
&lt;/h2&gt;

&lt;p&gt;This a part of a story for a year, that was filled with JS pain and some curiosity to deep dive into this rabbit hole.&lt;/p&gt;

&lt;p&gt;Some of these articles may be helpful for debugging or some extra things like "detect memory leaks".&lt;/p&gt;
&lt;h2&gt;
  
  
  Node-red Playground
&lt;/h2&gt;

&lt;p&gt;If u want to test it by urself u can import it inside ur &lt;code&gt;node-red&lt;/code&gt; playground.&lt;br&gt;
Follow these steps:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;install node-red: &lt;code&gt;npm i -g node-red&lt;/code&gt;
&lt;/li&gt;
&lt;li&gt;run &lt;code&gt;node-red&lt;/code&gt;: &lt;code&gt;node-red&lt;/code&gt;
&lt;/li&gt;
&lt;li&gt;go to &lt;code&gt;localhost:1880&lt;/code&gt;
&lt;/li&gt;
&lt;li&gt;click &lt;code&gt;import&lt;/code&gt; and paste:
&lt;/li&gt;
&lt;/ul&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;[ { "id": "1c61e459343a71fb", "type": "tab", "label": "Simulate", "disabled": false, "info": "", "env": [] }, { "id": "7e630719369e78fb", "type": "function", "z": "1c61e459343a71fb", "name": "middleware", "func": "\nreturn msg;", "outputs": 1, "timeout": 0, "noerr": 0, "initialize": "", "finalize": "", "libs": [], "x": 630, "y": 460, "wires": [ [ "4bad1d183c8673ee" ] ] }, { "id": "4bad1d183c8673ee", "type": "debug", "z": "1c61e459343a71fb", "name": "debug 33", "active": true, "tosidebar": true, "console": false, "tostatus": false, "complete": "true", "targetType": "full", "statusVal": "", "statusType": "auto", "x": 780, "y": 460, "wires": [] }, { "id": "895b7eb7aaabdc9a", "type": "mongodb4", "z": "1c61e459343a71fb", "clientNode": "132a80320b23995d", "mode": "collection", "collection": "mqtt", "operation": "find", "output": "toArray", "maxTimeMS": "0", "handleDocId": false, "name": "", "x": 490, "y": 460, "wires": [ [ "7e630719369e78fb" ] ] }, { "id": "07ed942530c7c97a", "type": "inject", "z": "1c61e459343a71fb", "name": "trigger", "props": [], "repeat": "", "crontab": "", "once": false, "onceDelay": 0.1, "topic": "", "x": 230, "y": 460, "wires": [ [ "63bd53ca32516497" ] ] }, { "id": "63bd53ca32516497", "type": "function", "z": "1c61e459343a71fb", "name": "query", "func": "msg.payload = [{},{limit: 160000}]\n\nreturn msg\n", "outputs": 1, "timeout": 0, "noerr": 0, "initialize": "", "finalize": "", "libs": [], "x": 370, "y": 460, "wires": [ [ "895b7eb7aaabdc9a" ] ] }, { "id": "432acb2349a3e856", "type": "comment", "z": "1c61e459343a71fb", "name": "Fill DB", "info": "", "x": 230, "y": 120, "wires": [] }, { "id": "5f22817afd4d56c8", "type": "inject", "z": "1c61e459343a71fb", "d": true, "name": "trigger", "props": [ { "p": "payload" } ], "repeat": "0.01", "crontab": "", "once": false, "onceDelay": 0.1, "topic": "", "payload": "{     \"r1jAe9RYK2\": 2018320,     \"RbURsNbZJX\": 3527792,     \"KxwwAf9gPa\": 457659,     \"dpSgixDkmM\": 2553056,     \"mYwb6M7bQQ\": 4353677,     \"5Zb7O4jivm\": 2848950,     \"WnayBhsUss\": 1983177,     \"jPu4Wl7wR8\": 1401328,     \"RU54kiGmMF\": 4591407,     \"VSitleZm06\": 1473210,     \"wtiLp2GCj4\": 2933152,     \"6AB8ehhBk3\": 4045038,     \"iYzo6BLELr\": 716246,     \"PiVLIqwvMC\": 1607081,     \"zD2GvCPm1y\": 2005289,     \"9yWzFc18bc\": 5098171,     \"ucp4cA2OAK\": 2246119,     \"9GcD02NME0\": 3429835,     \"6XppC5cFwe\": 1405253,     \"pkSpoRQ5Sb\": 2375430,     \"clVx3bk0qI\": 1036832,     \"3UlHOj1Ybr\": 4071932,     \"kGMXlT2Qdd\": 724676,     \"aXdNta2L4u\": 821124,     \"XN2AwHzoQW\": 833464,     \"3nbRUnGRIW\": 2991392,     \"qLkoPCCfWv\": 3279337,     \"F4DkbtFbOX\": 2265153,     \"dShTT7gH1B\": 1107878,     \"BSJSjRUZlG\": 178736,     \"hooipALUpO\": 4718496,     \"s2kh3d4RV6\": 1840115,     \"5Vrwg7jcbg\": 2949449,     \"40Fx23jDQu\": 2991905,     \"kNN4Amq08P\": 3975869,     \"ZYY9uqeh2e\": 1965828,     \"nZGWF5cNLU\": 1917372,     \"z8H51Imc4W\": 1918072,     \"2h0EtgqjpG\": 1307539,     \"tnbJy37ZdS\": 3468072,     \"tJR0gBgrX3\": 3495802,     \"GKA8UteY0r\": 1936469,     \"exDjqdTD3Y\": 3547955,     \"KucTXaQzbM\": 3660132,     \"s9mDQjFUk0\": 1275479,     \"nE6SGPUAgp\": 2458778,     \"92rnAuRlu8\": 1480979,     \"BWIWzGm1xx\": 4503185,     \"dkMaRik52W\": 1767038,     \"UqdkDnZXwx\": 196542,     \"7MNH2VCvZ0\": 1984655,     \"WUA4UttZlk\": 1621176,     \"PUmVhSUjR5\": 3735570,     \"BltXdwrOBM\": 2419426,     \"wcJASEjLYd\": 49198,     \"LAU6ZSJvDD\": 1586637,     \"rAHfaDSZs0\": 2555480,     \"yBYEoa2HbH\": 412758,     \"lxezxziHx7\": 4912208,     \"g54CD804Xl\": 702162,     \"KEWMF0gCri\": 582163,     \"vaGx8j80cu\": 4213790,     \"KdJugZG9Pk\": 2536458,     \"fw5ZfrV76R\": 568374,     \"Q7b4kBvuUu\": 4843721,     \"bJR3xD7qDE\": 2538039,     \"45Xr6V9MPu\": 480880,     \"lhFDBxmyYw\": 1242292,     \"rROlBRhJFC\": 283671,     \"XyDAB1KAsz\": 3176403,     \"XWL2NhGePR\": 5021108,     \"glQEyZMUN8\": 2721952,     \"4qkbkWSR96\": 4868371,     \"eTNybxamLH\": 3079950,     \"XMzpohp4kA\": 1189189,     \"BIt4zXzUOa\": 3367574,     \"KzRoJc4aRm\": 3208797,     \"MmzgWl8hce\": 4483177,     \"zahaYUwUde\": 1183149,     \"ynJQlZgU1C\": 1911189,     \"7echx0Owy7\": 4640747,     \"xgiPJY7ULk\": 760299,     \"rTu6IL0E7z\": 4402030,     \"v1lqiGjhXt\": 3151387,     \"nNQ0hK8KSd\": 2744520,     \"MwQhO01S0g\": 1289373,     \"pa5r9FAwId\": 2494375,     \"CGahHya1iM\": 1689619,     \"sFAtDQBG0F\": 4384584,     \"xcD86BVpnI\": 2943512,     \"RaMfZRo2TN\": 4084260,     \"9sm2gM50Re\": 2238118,     \"lH9ShBgdfQ\": 310866,     \"JtYihgpi50\": 4615024,     \"L5WKCVJ3Gg\": 144899,     \"aY9op2Wrmf\": 3701159,     \"Zfyh5OvzMA\": 390446,     \"JysnAuzy6u\": 528509,     \"ycyqceogI3\": 4622065,     \"mQ9LcnnfED\": 4055853,     \"STyjy1lkf6\": 3987420,     \"6ClexV2FfU\": 1015859,     \"IS9AmVvIzk\": 1459257,     \"laMShDcmxj\": 2365852,     \"80lVw98T3T\": 979420,     \"WGdJF6P0K2\": 3728433,     \"G88jTNKsgY\": 846449,     \"TaZhiPgsJo\": 4257459,     \"TJnQiEhAcL\": 1670832,     \"eKAFFy5b7w\": 1646249,     \"9KRCisrOu1\": 634774,     \"PAHAT31Y8I\": 5236086,     \"FyXD5NhYiF\": 3663674,     \"lCp5WW9b1U\": 1917092,     \"ZUvkF5hkdN\": 4754157,     \"G3nh2ERolN\": 5113589,     \"bNUMkxyfUs\": 5046778,     \"ShqmC4glm0\": 4522968,     \"p5NyIjlD8Z\": 4535832,     \"BRFirn2lUD\": 4418591,     \"3s0v7USW3p\": 131692,     \"rqO2Qxh4Tz\": 1007379,     \"VoK8SRvPx1\": 17176,     \"hBc6OdKLf3\": 1702620,     \"IFNdM3YnIo\": 3795946,     \"y5ToBsCLnU\": 1398858,     \"8FbBK3b4ZA\": 1878422,     \"CobY4ukcuW\": 4870255,     \"kUNbW6nsQl\": 1188354,     \"MIoijrQdd6\": 4542183,     \"YCZz9QaFhh\": 2937503,     \"7M3x39Som9\": 3528567,     \"uiBWtumcK8\": 2909667,     \"ZteV24z7fZ\": 2648883,     \"9FeFrqWUcp\": 878062,     \"mUkclYkV8A\": 4503708,     \"QnJnQoUeko\": 2191723,     \"JT9GOETMGL\": 3886642,     \"hPd8yFjvyp\": 5226293,     \"9kBXY4teFG\": 2835575,     \"LyIGc6M7T1\": 2175409,     \"UC8dPSAvx6\": 4091273,     \"S0xfxmmtHw\": 1656957,     \"0uwn3PAiNA\": 2644620,     \"3S23fg8yql\": 327247,     \"qrdnBne9lJ\": 584889,     \"zLb1sqi5YI\": 2658855,     \"ddxgeP7lTp\": 1594394,     \"PxSBCcy3cX\": 1915709,     \"ecXKXEj0Tn\": 3706894,     \"DIqPk3wt9p\": 2481242,     \"MbRh9tH30t\": 899970,     \"Z7tdxXxZy3\": 24544,     \"SGOnY2RIpg\": 5023017,     \"yNjR6HLww8\": 4896414,     \"T3HoTg7sQh\": 5232336,     \"41QsgQDuME\": 3789541,     \"HBMkWWoZ8a\": 361265,     \"2nNEoVnNaX\": 1673683,     \"XkBSSuRyx5\": 4476634,     \"BVVCNZstCB\": 2170528,     \"xcZc1PJ9tp\": 4184325,     \"ml1SDMOoNr\": 4158608,     \"Jpqdohev2A\": 4059373,     \"XWxr66jAlO\": 1058445,     \"wATXVS3C5n\": 3656973,     \"h9goc2IONN\": 1557242,     \"LTFhfJ0Ncs\": 4728513,     \"Pp8E6Pp0qc\": 1102911,     \"V6vKd1eqYG\": 3420615,     \"m3FcC7mk8U\": 1957843,     \"A1IJLtGX4n\": 1984646,     \"8mS5FyjeBI\": 3405934,     \"XPXSQQZWql\": 1768898,     \"TRwFryKI4n\": 2386027,     \"rxFeXDElP3\": 1880051,     \"6qfybrgLXL\": 1297404,     \"vId74unMoL\": 226461,     \"Zgkpv80O4O\": 660214,     \"SchJNzwZsF\": 4083442,     \"E3jvcoExef\": 2684112,     \"noTatQlaBc\": 573399,     \"hWIMX8Kzf7\": 2149092,     \"kpq9n1qqbZ\": 4245870,     \"sOtTRh2FNG\": 3875046,     \"tyrpUzfRzr\": 493912,     \"WdC3tXS7mc\": 1340642,     \"TCMDhEbL8H\": 4709069,     \"0Qle3H7HvQ\": 1436000,     \"u1C4ZhtPIu\": 1007828,     \"gCVor5mLxp\": 2341668,     \"7iZVceJY6l\": 5265948,     \"ewcaB6WZk1\": 3795786,     \"Dd8gylW3sX\": 4440994,     \"BXvh6S0MBG\": 2168890,     \"Q6VCaHTFQV\": 1117819,     \"ZsZUMX2un5\": 52981,     \"aUpSU1cfxF\": 4705791,     \"DICeopP8Qt\": 883488,     \"4ohIPHBuNf\": 2555484,     \"QglcnwyWgc\": 2824999,     \"Xo18P9AiPq\": 2337411,     \"RdXrpsuSqM\": 3404279,     \"WNiPCNOaEI\": 4034718,     \"ps1Q0DfnWh\": 272816,     \"c5C0s9nfQI\": 89175,     \"spko2OLXlF\": 2992657,     \"JOU6JNxp5K\": 1896793,     \"NgzTg1xvxW\": 2950671,     \"RrZ0iJBokr\": 1395506,     \"xJR0cLkZUy\": 4845210,     \"i8QzuZ4svt\": 973705,     \"5zVRMR3wb3\": 2246463,     \"jRfFG2S2Td\": 4717832,     \"PeFxNMbU9F\": 4660302,     \"XsG5WgG8da\": 3924664,     \"ZADZCGfHu2\": 3427008,     \"xZGrsPU0xV\": 21690,     \"qsnpLPXoHG\": 1676456,     \"InK1UKNN0N\": 854794,     \"C1ObxhFxNN\": 5294775,     \"6SwLHk15Ay\": 3847697,     \"h4hbGcdh0L\": 2166158,     \"CpPZGVhwDN\": 1758473,     \"gZwMUC9UjW\": 4365970,     \"dwCORDYtUm\": 3301625,     \"zDbOkeuM3D\": 4538784,     \"kHEauijfuo\": 3737144,     \"RnZCmGuEcp\": 1625167,     \"cal2jDdt27\": 2994834,     \"l5BKfRHWt6\": 4654607,     \"W5iUWzIJyY\": 1396966,     \"LT2JYsmRzM\": 4751064,     \"ZWeR9HKgu9\": 2300035,     \"v7cc1INChj\": 2710092,     \"HvwZXv2F9F\": 236462,     \"GmrbaoSlHr\": 3188933,     \"7rl9MvyTRA\": 2202016,     \"LggbdUIdb7\": 1946086,     \"UwDxY06iqI\": 2773586,     \"GF1K46GGK3\": 576981,     \"GouPmu0DEO\": 2233090,     \"YZSVwHEO4v\": 3081924,     \"flGmAIZvMS\": 1939831,     \"uvYd0CYQtz\": 4384810,     \"lmcqFC4HDh\": 4102783,     \"T8JkdrdqJU\": 2477260,     \"3opOYeTWSD\": 2833359,     \"adCsL1BasV\": 1580957,     \"olSHQgzjLb\": 1347902,     \"fFhjNB8YSQ\": 956601,     \"YQDeootn3j\": 2607106,     \"U8ITh0CK5Z\": 903539,     \"ZgLlhq7q0Y\": 4082195,     \"wJletGmtGa\": 4108528,     \"IOZWPk5Uhr\": 2726732,     \"A0WMOikrVE\": 4519933,     \"6rdkGDDJYW\": 450651,     \"2sKapJNNdW\": 165903,     \"1sTQ2246Ma\": 2866373,     \"ZtnVmp6oFB\": 3831469,     \"K1IsEXgImV\": 1776037,     \"d7c1Y7m3MN\": 3109522,     \"YqaqaOQskW\": 2923263,     \"L5ZcMrSYhO\": 1534488,     \"bDu4Txlp54\": 2975654,     \"7qWUbei6E4\": 1022651,     \"LFlMBTgQJt\": 493243,     \"hMOtm72t9B\": 562539,     \"mXFA8qAMzi\": 3720984,     \"wrTOAkdypW\": 3062375,     \"geEgQcmXrK\": 1445545,     \"roRJPme8YU\": 1211888,     \"TVGbshs5wC\": 3247980,     \"qMtqH7iSfc\": 3277781,     \"suR1KaYUHp\": 843305,     \"3gHk8463Dy\": 969289,     \"kZjMQQFVD6\": -7885,     \"B7GWiZPZU1\": 706346,     \"9DWP4iwjMf\": 4686773,     \"eUZBTmngI2\": 2810704,     \"mpkAmf1cck\": 1472803,     \"2gs8fKy4vk\": 5224167,     \"EwFDi5Jb79\": 4014729,     \"37pJt1r2Gq\": 5159086,     \"mzikQjX7SJ\": 1406543,     \"hGcZWQAAKc\": 4602605,     \"jHcLzVcB7E\": 3839862,     \"APjpSLe6iS\": 729159,     \"i4mSvvRTjQ\": 1884480,     \"ztiAW1GmNX\": 4352174,     \"xxGpUed370\": 2225449,     \"TFZbPai46m\": 2666782,     \"cMz42qfoBx\": 1000702,     \"QO5OqUWrL1\": 2811031,     \"QG0yCBgwUO\": 4385109,     \"lyAwnbLYnE\": 2341470,     \"un8jjhZW9b\": 26063,     \"krciMsFW4k\": 4262010,     \"6k8oBx3yKb\": 659204,     \"exBZ3HPaBo\": 5062108,     \"ECtOO3dEa4\": 2618218,     \"XPHoheZtFe\": 4738669,     \"22qLXQQYEq\": 3447707,     \"80UhkjCuQ8\": 4087908,     \"J63h1Dm7bp\": 4208196,     \"8fxdj7XATq\": 4687906,     \"2QvcgXhAeP\": 2658597,     \"sSP1qlv1Xo\": 229119,     \"5ta9twwwgA\": 2540770,     \"9PZDZuMZ4p\": 1588438,     \"I9n458tQmW\": 1453493,     \"9Nb1DXPOvm\": 3170786,     \"ecCtXSxEdF\": 4819157,     \"18Urw933jL\": 2977849,     \"LESPe5TGz4\": 2617927,     \"tjlaLvMLPh\": 3492980,     \"Q3ixHsqYLd\": 215862,     \"UltReqQzbT\": 2833164,     \"PlJFOa429V\": 3348346,     \"Cu5oAEq2Gz\": 210357,     \"yU8mb2RlAs\": 4372778,     \"hifY5xX6UT\": 2143160,     \"eJVoMhduO9\": 3340621,     \"z2UOo1xVsL\": 267580,     \"FmPWz63Gk6\": 2692215,     \"zvk5OvvXfT\": 2027165,     \"EPn3e1dbJu\": 1874797,     \"0KSbh5G6Rt\": 5136999,     \"JVYvJG7AIF\": 1377939,     \"in8gvMAfxN\": 4119658,     \"XJ105vxnfb\": 845638,     \"wjxyayZTCD\": 1930955,     \"JIUD8MzT1c\": 586177,     \"CGd6d20nqr\": 4082084,     \"i44O63wbxL\": 3161477,     \"OomKOZBDMM\": 4911320,     \"OUu65dz4nU\": 798345,     \"I2UL2ivCt6\": 3984088,     \"n3squD4rmT\": 2718119,     \"oKV2rAhFZQ\": 3359807,     \"sGH319Yqg3\": 3194214,     \"Bf8xbHdO1O\": 4922900,     \"kqQL3lDgTF\": 4028152,     \"VECVZ9VAWp\": 1793025,     \"otU5lM1xQU\": 4333485,     \"fRbhD1a1C3\": 1922394,     \"cq5eXoqRhj\": 2246192,     \"iP1jw4lg9x\": 4360928,     \"RhzBxISA49\": 4795952,     \"EpsuhdgBtl\": 2326968,     \"3cdF61nUdC\": 371780,     \"DJ8wD4zyKb\": 4191539,     \"qpvTDylXDj\": 2744947,     \"9wEYjqXpGF\": 4490051,     \"hCHstFhrDQ\": 2038097,     \"EFXM4ILLWW\": 3465635,     \"SXSrsXYyhC\": 2831971,     \"cTuU4oucLh\": 4571124,     \"ft6mYKqlap\": 2689078,     \"WaVFDb1kTX\": 4437833,     \"zghWvXsSJL\": 545415,     \"3TL1ml8WIm\": 3096478,     \"dNv5RTYRs4\": 4522188,     \"IPQ0OGtFRA\": 2602011,     \"bxUZQFWhBa\": 4798064,     \"YouDYKPXdz\": 4950362,     \"7Xkmv6vxzA\": 5192141,     \"TKUQ22bhep\": 4764901,     \"ZqLuMnu0lP\": 3432678,     \"uXjeUGCNr5\": 3038354,     \"VRDPHC19eJ\": 4961904,     \"cWmZGEsyr0\": 2314112,     \"rs4LtfdgCK\": 2864889,     \"psulOykfnm\": 4795787,     \"7IzJtTyWdg\": 144866,     \"E0D0QhmblH\": 3116937,     \"mUQZgvHN4J\": 5142920,     \"US1WH5HAPA\": 3215103,     \"avR5MUlybE\": 2860187,     \"VbeJgT5hqV\": 2389649,     \"WYZ7YlVOMr\": 4417340,     \"ljDYijt4Ju\": 4129491,     \"sfgpeW8ZWz\": 996458,     \"a6skl7y46K\": 1342307,     \"Vb7T8gBdNX\": 4592997,     \"jW3RHw3go8\": 4496055,     \"q4oMAcB3l9\": 2226234,     \"TLuHj04IYG\": 1196294,     \"7rTTdOXjYR\": 1382983,     \"uCOKtt5Dcs\": 2125158,     \"UDOlU9wfdj\": 1407988,     \"LzW1mvwNRE\": 5243141,     \"kAvmVaZr3m\": 4508560,     \"a37HzeW7IW\": 2385455,     \"08uJSMdmqV\": 5187570,     \"YfPDyDcb36\": 3349303,     \"lOhrugP0be\": 3760391,     \"R8MPX40TCB\": 2926628,     \"WMsrZGbSUp\": 1992063,     \"oyMWFnh105\": 2233765,     \"JdmdOmtM9t\": 1340688,     \"CaZQRbxPv0\": 437269,     \"03Z49ez5fU\": 2460838,     \"Q25sCVF6w5\": 17464,     \"lQrustK9iw\": 1855415,     \"BCLyAIQyRO\": 1584218,     \"Kuy5Hi7ogV\": 2951701,     \"fgcDmVsF31\": 2128050,     \"hLo6AAneNB\": 3726315,     \"KJtFf1o8Wv\": 4733603,     \"OcPdm0pUSV\": 112127,     \"hw398rkzqC\": 3121377,     \"fAHtwVTRgG\": 5169090,     \"adJjC53Oph\": 1134961,     \"zvVvmvpcjk\": 3602986,     \"L6e8GdbXNv\": 2052932,     \"uaGUMGVESm\": 5202909,     \"10SK59AYJI\": 3378870,     \"XRhsDSS670\": 3111146,     \"AfKGqaRGZr\": 5258121,     \"nt1ikPMQrf\": 4618111,     \"YBGDMhsKlh\": 1400426,     \"uDI25oeP5V\": 1951198,     \"GVcnJ5CkSz\": 674937,     \"oWKpIZu1Rp\": 3804001,     \"Hezk8IEZnZ\": 3921606,     \"aL5JpyOtj8\": 2717535,     \"hTwzRqz2jp\": 2604440,     \"YUVl5dKfeO\": 2563798,     \"uCPBtz0WCg\": 2185166,     \"p4NFvYW4dh\": 2299717,     \"0xvPQJWJF6\": 5157360,     \"EDq58cIgcb\": 4504540,     \"AcdcSaEYHD\": 2104872,     \"3jooHDqOhz\": 2556940,     \"UhGt9XkalJ\": 4190689,     \"8Mz66jjF7I\": 385509,     \"b7LHlpCkrB\": 986823,     \"0JCeH6B09e\": 5054560,     \"g38Y7w0w4Z\": 144190,     \"hvRGGMYAEE\": 274110,     \"u8ji2nRsoi\": 1276781,     \"k11sfgXSPV\": 2903067,     \"hDiTZaVoqy\": 745345,     \"95XvzviUpm\": 4215703,     \"OKDPXTf0fG\": 3054580,     \"aNBQWpKE7D\": 1536814,     \"D1ljpq1xEY\": 4695708,     \"YgQ6HsOi7H\": 2454632,     \"CbuYaGlGkV\": 2881505,     \"HgulPtYJvn\": 1792212,     \"CFf3mc8twG\": 1614341,     \"KDuz3h8Ng2\": 3616116,     \"2vxKiYHork\": 968654,     \"SzAv2jBL6k\": 2332134,     \"tP5i2BivT2\": 3192491,     \"dNHtxHd4Is\": 5106402,     \"PcuBsyy3Nk\": 429172,     \"8plrdro9q0\": 3778318,     \"9MPnoukXre\": 4656706,     \"U8JbEAa62n\": 4221451,     \"MdjUhBHvC9\": 5156023,     \"27f1lFOMTs\": 1973340,     \"dZyS3UOspk\": 2320355,     \"B8CwYXLVXz\": 3491947,     \"lNiZmbDdBo\": 1506537,     \"E1gM5240Tj\": 760598,     \"3L4gbtRCqu\": 538583,     \"YZIBzX5VFg\": 1905538,     \"XsZx3DnLRt\": 4709013,     \"W8mHu6tWEO\": 3028044,     \"npMQwqrhbU\": 79182,     \"QgguqjVbNV\": 5003470,     \"epdkvp9NzV\": 4916940,     \"NjHbysWGsj\": 3498839,     \"AdPlYk5F8e\": 1168535,     \"4eIX6JMT2I\": 1792932,     \"RDsnPYqzNy\": 4255916,     \"T70E1w5aE3\": 363117,     \"rVdpribGMO\": 1444044,     \"2cTuyiR7OP\": 2014088,     \"LaDjl39rdL\": 3717715,     \"bJwxeFNhk5\": 1875552,     \"0Xdjudjafl\": 4696045,     \"OMBpv1xkHg\": 2594965,     \"3tI8tkVptp\": 4668866,     \"bZAOAy22Nh\": 444104,     \"neh4coeGE4\": 4825040,     \"CGEm51JsKx\": 3693379,     \"OgmBnFIwIN\": 5238970,     \"5j5mKdIebF\": 75952,     \"D9DRTSjO3C\": 1548040,     \"CII3hTUP6D\": 3409919,     \"HjiTvMaqUT\": 3063690,     \"EovLcMydYd\": 4508762,     \"x3hCstbC8Y\": 4305391,     \"q27Pq2GZKd\": 1550725,     \"eGnhdxTuq3\": 744697,     \"cA8iPl5UCq\": 1379738,     \"auuyYgW6V2\": 337732,     \"b311eaUmwC\": 1939297,     \"jpvRO38Os2\": 4465977,     \"vOX9W6G3GI\": 1983415,     \"OMq9Mnl7yZ\": 510762,     \"TLiEPHvWJY\": 2406863,     \"agkl2PYvxl\": 5225713,     \"KjnLbOnNSZ\": 2713258,     \"UQ4Uwc27Gm\": 4382102,     \"5ZToI8tdfn\": 4638349,     \"5uzZLyiaM4\": 2964582,     \"axgUAPwhrX\": 4444296,     \"ES8WhxoE42\": 1681352,     \"arJzAfNZhc\": 3892311,     \"JESMAtnDPZ\": 3189321,     \"aegfHouuqN\": 2204149,     \"orkLQYuIl4\": 217448,     \"e1Ar2MI4NT\": 2788128,     \"CNjmLdaNKX\": 918217,     \"I7Kd8s6VTy\": 4277841,     \"b0ZD0Gm1cN\": 1459872,     \"VHhVwTgRaU\": 2094596,     \"Tj2kL9CNXK\": 3199291,     \"bEA4DHBt3v\": 4050076,     \"hiHj5KG9L0\": 4652934,     \"BN3zIXE3Oa\": 5228775,     \"PNJ4oXOpVs\": 4202544,     \"qt9WR0dtQA\": 916743,     \"074Tv7PPiL\": 1676052,     \"rpo0D4YudJ\": 453945,     \"6inm0PwsWG\": 5275785,     \"ijiv0V9egJ\": 1265383,     \"LFjgcVbr5D\": 4365322,     \"UUkYgDech5\": 33020,     \"DwSvztkDUw\": 4189898,     \"POPQuv0lO4\": 2140031,     \"p7jfuOoiII\": 4528230,     \"WyWayLSUgG\": 1212780,     \"cH7v6GihXK\": 1482316,     \"0lLHF6Ixn1\": 406017,     \"d6qnaJoXUb\": 3000582,     \"Dwv2BpxX5H\": 1267863,     \"e09lVjPXaU\": 501435,     \"RWyL8iUjsr\": 4982321,     \"oxVnCrBwMq\": 355870,     \"Vy4icGgBsF\": 3525481,     \"Co0MS49o7q\": 406682,     \"5WClSs0jvF\": 2164069,     \"B0VJumF1aQ\": 2189617,     \"1xCFUKP81c\": 1646563,     \"43l4GW1PNV\": 1026529,     \"xhyDIEfgtY\": 3192254,     \"M5biWmcO0t\": 4302817,     \"8l9BRF7VgL\": 4658370,     \"PCtlKAxyYt\": 2468795,     \"5Flz60xVOe\": 2238471,     \"Cvy6wIgnFs\": 3630902,     \"AyJcbHo9f4\": 2435360,     \"1dm1F3kX3A\": 4082551,     \"ejOMoOoWWV\": 3337942,     \"SmcasCMX4I\": 2655894,     \"Dmr5aBXKN4\": 1960121,     \"jw7cAxZpuq\": 2564985,     \"zStThN4OYM\": 1926626,     \"Pj1yEeOueG\": 1666030,     \"baKrUkLNlx\": 3907931,     \"cXX6XL2Nqi\": 3512806,     \"9xzR5Wzc5U\": 3708626,     \"06GFmeS6no\": 3097048,     \"8ud1cS3rvU\": 743492,     \"eyY2oXZee5\": 4685957,     \"vyi1N7XXrc\": 782270,     \"Ynpl7x0Zax\": 128393,     \"W9JNc1V8sh\": 645053,     \"gcauCCmQAT\": 3336621,     \"upPdb2dGcx\": 639337,     \"FBrDJjHh8n\": 4874481,     \"BJ3lAItRau\": 4643359,     \"SYCa91xKNK\": 1515459,     \"CWcbYJW0OC\": 1018234,     \"fr8I3h0XlT\": 2325251,     \"ZYY9HEMphw\": 701848,     \"9CxnNWLWji\": 2089705,     \"3ZLYBrVLmW\": 84342,     \"pxzH07SERd\": 2409797,     \"RnmCfBq266\": 1423274,     \"vKQlyGeU4T\": 3232023,     \"DpmS0U9sNd\": 890329,     \"Xj7S6PVDS4\": 666501,     \"9fagkOne4O\": 3167400,     \"Y1asREwJlN\": 5140531,     \"cTqCy3MgeV\": 3946204,     \"3nCDQhzH2E\": 2072407,     \"C1WcYf56Nw\": 2517253,     \"4g6HuvmKC9\": 2036377,     \"iQMcWTGqgB\": 3362751,     \"Q7MIssPkwx\": 802072,     \"kzbQfRPF8R\": 3599066,     \"ZiqLM1klED\": 553275,     \"B32GJ1Y9Si\": 3342131,     \"cLBy0Z0mXO\": 1357017,     \"kndl8tjtWH\": 253188,     \"Aze6c2I5xs\": 2390666,     \"3qASAzKpAR\": 3037566,     \"ARnEcQI2T1\": 1838450,     \"al8AjeZGAz\": 622934,     \"8yEnJUBKJ6\": 1997314,     \"fEPnDIZd9S\": 1088142,     \"D6YW12Hnyi\": 4472679,     \"KNq4UqAmvN\": 4199021,     \"5Y8iWj9Wc4\": 770082,     \"CqeM5v4oH6\": 1114065,     \"y7R751jmyO\": 1888551,     \"bW7mdnJqiW\": 1817944,     \"pEfGcIHsUb\": 4021384,     \"2NoRdOnIzZ\": 266782,     \"ZZIINx50J2\": 798575,     \"EVhLxBoLCL\": 503630,     \"jp4Kziq1Lr\": -2717,     \"r4GssHZvQD\": 2939025,     \"upDiGOCkr0\": 3937379,     \"bVF8S6ZA5d\": 91824,     \"c5WyF2GLpS\": 182944,     \"kGfakJTaon\": 68856,     \"5vwXwwLg3y\": 4277682,     \"benECHnPef\": 4440772,     \"6D6EdvqCxT\": 2311907,     \"mJJpRhH91W\": 729069,     \"7H3eTQbkvu\": 1974736,     \"ooy9hh4EiU\": 4663286,     \"Gz5suU1TL4\": 4602244,     \"1VqulsKb2m\": 1020658,     \"tOIIQQ8xoL\": 2781186,     \"vGr1sBnQxl\": 660357,     \"BY3MG3aS9s\": 295487,     \"JPFl8ySBoT\": 1267476,     \"t1U7YDvAet\": 4443774,     \"fv4y29Fmlb\": 1187438,     \"a3y9wAmBNw\": 3569875,     \"jgpTq8MueQ\": 2906845,     \"kuzUI83FDh\": 1543066,     \"nshWJVI620\": 3900841,     \"omSnkE6g4F\": 1546725,     \"a5hQWYACWh\": 5296986,     \"oVBeol5tV1\": 5021633,     \"Kh8Rme2I5o\": 3028369,     \"S1zhOMTmTT\": 4539355,     \"93w6eiGYgC\": 181609,     \"WzU8EELcqz\": 4105127,     \"XFrZErf0yw\": 2758396,     \"sMYbGU0k4D\": 5124398,     \"Jm8t9KJqjZ\": 4005216,     \"cK5KVB9yf2\": 2346472,     \"XkUkVE5bzB\": 3171479,     \"NfzcLw2Tcf\": 4442318,     \"zFWQ1vB8M3\": 1867861,     \"2C5r5CigRh\": 1800194,     \"5GynYBtDxS\": 1057662,     \"LxJRrPwrug\": 4507478,     \"DdY4uNUwzY\": 5266734,     \"tjaTdkJ9fX\": 2837603,     \"N94WfyX6kv\": 4270985,     \"sXIVKjLMF4\": 1699313,     \"iDWMlFjQt3\": 1649223,     \"CAuxF1Y0fL\": 4483800,     \"i0UXYPa9gk\": 1466173,     \"HepZBj884D\": 284557,     \"u9DoP8PxhU\": 1866209,     \"nBO0N34rZP\": 447039,     \"2b6DmFJRxP\": 1103559,     \"C6xNIS3G6F\": 2848993,     \"OWGuakNEhr\": 4823812,     \"Z4BO03zibJ\": 363315,     \"kad9V7kByJ\": 3106692,     \"ZT4WNLSpsI\": 754779,     \"QZ1TerODNr\": 2115006,     \"7ph1YuOBIx\": 5086029,     \"hBmhjWwiiU\": 2489312,     \"DSB94pTO6t\": 2628899,     \"3duNpy2CPG\": 1208050,     \"7qGwCQM7qy\": 3078294,     \"dlRmxvJ2vA\": 2415657,     \"5dZWlovCDQ\": 2555668,     \"jlpUhXFsNL\": 338561,     \"STHg7mYFDQ\": 4776218,     \"GpFZ2CaSch\": 4822945,     \"rKVA8tSeJq\": 3343890,     \"TXGMfq2rwx\": 1948686,     \"Ja844yCX7X\": 3732230,     \"1nXuYljc7g\": 2748699,     \"1aG1Xa769c\": 430162,     \"dF2gNw0dow\": 4934892,     \"iILF4EsgqZ\": 4707319,     \"kFOTJVlBGs\": 2572250,     \"LyxgNLDNC6\": 4792619,     \"g3cCwVA7wW\": 3922174,     \"vXNNehQf0x\": 2568562,     \"AMwUZ9bP9V\": 3310536,     \"8EsJXGBMj0\": 1331447,     \"9uVWi7T03B\": 2094796,     \"1k6qUSd26P\": 4646587,     \"A4TETLoqpD\": 5057918,     \"6I1gDHeksM\": 4520570,     \"FGP8jq1mM2\": 1083037,     \"xHKlBRkNu4\": 4306983,     \"B63IYlh38A\": 3737000,     \"1eTsFng4vZ\": 420760,     \"hJnD9NSzCf\": 491735,     \"cLLfVlMqP2\": 1298376,     \"xfdDKGbZpW\": 3657595,     \"UOtL5HV8kQ\": 2026159,     \"WjYseBLS3G\": 2807644,     \"TFyVdh5JQN\": 3465535,     \"2lFntfLGW3\": 976382,     \"oKAw46GZ6Z\": 2578206,     \"yHeRrkAg1V\": 2280654,     \"u22wlNbQ5b\": 1386741,     \"NVKxuB7rah\": 2851609,     \"K4rBHSNxKj\": 4359090,     \"vknYAV2mOf\": 4907371,     \"I9lfF1qC1d\": 904083,     \"HCQVV17wsn\": 1113695,     \"9DaXOx7h1U\": 4197310,     \"iAR7THqTvi\": 3106598,     \"YqOKoS4fMu\": 3418420,     \"ugb2TDGcAP\": 1701664,     \"FjLcI5dFqF\": 4862748,     \"YMZ8O7lf7Y\": 2923499,     \"a3gbnUBubt\": 3315921,     \"VCQS1Y2Eia\": 1114531,     \"hfQ5hReuHV\": 282136,     \"Fhgx0ZcqYb\": 1666940,     \"QXBUTaoQjl\": 4845859,     \"RrKd8QRNEH\": 1455834,     \"easRo8XeMA\": 3456744,     \"9KbvuJzJ3r\": 4644888,     \"hKYNiuPwve\": 3504090,     \"2Jaxfjybey\": 4474257,     \"88twQm1TLO\": 4616814,     \"gF1QuTe4lg\": 1389404,     \"OFyclbFdNe\": 1103630,     \"TvVtPZix5U\": 2357637,     \"piVMuqTn0m\": 1543273,     \"BNQbdjpKby\": 56337,     \"6TbfOPB6BO\": 2022883,     \"RNtM07Dbbn\": 1674870,     \"FzrKizn4aW\": 1244563,     \"vOJqnga4VR\": 4139257,     \"ZEuzmCMrbO\": 1666455,     \"6UcUjs2fXf\": 1131859,     \"j2YBJL6Vhu\": 2224123,     \"FHxFRF0imq\": 547800,     \"cDr0Ba5OqN\": 878331,     \"Blgipntrt6\": 2463369,     \"YpPa6iZdpU\": 2243766,     \"eWNeMhcPSP\": 3971252,     \"eZXIODpZhl\": 2176039,     \"Sg7GavdFcx\": 3983872,     \"Us9We1PtT3\": 1003337,     \"5ndvoKkxMe\": 3970025,     \"WTlxgxG3Fh\": 1254726,     \"Vzhku7A6C7\": 5060454,     \"gnclbMZLnP\": 3627595,     \"sOOIzaCc4P\": 2859708,     \"jksWhDhexi\": 3161481,     \"83piCZjQiq\": 2508504,     \"1pKpCO6Li2\": 38081,     \"7t8sODneho\": 720326,     \"yejenMS8LF\": 994410,     \"AfBBMVhhJS\": 1865303,     \"zhWRr7wZIu\": 2370766,     \"2pizRkqVh6\": 640583,     \"Bare4GbzYC\": 202081,     \"P0cnBFwEIs\": 560671,     \"GQClbo3I2q\": 1486920,     \"rSrT0ZfB7H\": 947601,     \"MS9Qk1CTA5\": 2304113,     \"b4Mxw9yQ3C\": 77354,     \"K1ExYZ2gkp\": 3544852,     \"waieaQyBC9\": 3683172,     \"OqbVZ4Fc7r\": 4141346,     \"u1S6dbW8ic\": 715150,     \"mkiCkumYCV\": 5116568,     \"dwTjO3yYFS\": 3043396,     \"da86OHy48J\": 2848933,     \"YbeQUExhyO\": 1741161,     \"BzaaDuRRtz\": 4585528,     \"q6UeZD6d62\": 2706199,     \"dtM9elMKFg\": 3960136,     \"ZTTQ56WQZd\": 1639741,     \"XxyQzRsO9i\": 2727937,     \"UWKOXzkyWg\": 549931,     \"qglNGFqLY6\": 4074365,     \"qEvdpGlA76\": 613821,     \"Ndk8Ojw0US\": 1969765,     \"Lypd3Uc3kx\": 2305088,     \"mcfSB6pvZ9\": 737822,     \"NYKjjYQH3D\": 1600428,     \"gGGj8YYHDp\": 2212423,     \"YZF2LutLmq\": 406541,     \"gCUDEircH6\": 3915395,     \"bX6A01b8x0\": 1488236,     \"nkXVW9qSGb\": 3726159,     \"ccHgN4Vt9L\": 4171648,     \"AvYknVdtp4\": 2980837,     \"nMkfHS2kFF\": 2732764,     \"74Glid3S5I\": 2206063,     \"8Z2BlK391B\": 2108347,     \"rEygjs0yQQ\": 338807,     \"TZfGtiInxb\": 3398672,     \"r7TjPX93kE\": 606821,     \"5nynb8QFf9\": 2379696,     \"BnR05oavUJ\": 297129,     \"2ulOzaaRyr\": 2130343,     \"zR0SVyO7cO\": 1717637,     \"BXj8wRzSJ0\": 3612660,     \"qCkwpLphZq\": 1600089,     \"dLf8CkAnyv\": 4189031,     \"xI0v7uziXp\": 3185942,     \"tXTxVAXzkQ\": 4250586,     \"eLXZYaVE7C\": 4750815,     \"ZNldjQD671\": 1150769,     \"PNRj7egmjZ\": 4946480,     \"RKwRP9nDVY\": 611696,     \"cx7TZV1GMt\": 542010,     \"oyytkN4L8S\": 2913329,     \"niwDOW8HbO\": 2847929,     \"26sKbIKNTX\": 204006,     \"Ly0fbzF4wr\": 4985130,     \"lhRX2KzERi\": 3672108,     \"40DrO4OE6u\": 1232325,     \"f1kH4Yba9s\": 4929489,     \"SJbx2T1cR4\": 937596,     \"r4z4dnoT9N\": 3315077,     \"g1UKXakl6E\": 978463,     \"7Pw8vzGRM8\": 1047835,     \"JRolTYsgi2\": 2434755,     \"tVOQQQHFtY\": 4839944,     \"TlNgQZBJOj\": 4358672,     \"mFs4N7TJUJ\": 2894878,     \"KSyjoJ1ULf\": 1079695,     \"Id29AC2GBv\": 2188949,     \"r8b7KkBq2O\": 1834586,     \"sPmJn4cG4U\": 3585744,     \"PsjV9yxzrU\": 621229,     \"4h0UAoeWlR\": 1165614,     \"N6hd1Ox7SX\": 2280873,     \"7foTiGMVTz\": 1695381,     \"gvDEvThiEb\": 3600900,     \"b4zqbfGR4f\": 3698662,     \"lDfqN9Itwi\": 4782323,     \"8J9s93cuey\": 3658219,     \"j16snbfYIK\": 1826137,     \"prN8EGBmd5\": 1189778,     \"Nn31f102h4\": 1418680,     \"8Y1paV3Oax\": 1525501,     \"tFOPmNyCb8\": 4026776,     \"RunKt1I8iq\": 3381835,     \"lBKHnwQ6lR\": 4044024,     \"OLt6GeAWX0\": 2476137,     \"60KYcTBCfZ\": 331527,     \"CwwfNJpOH9\": 778020,     \"aRbuUWknpI\": 4491489,     \"HvlBjldCT3\": 4513686,     \"H8W27SfjpL\": 4660233,     \"AENWA9gNmi\": 2754832,     \"Pc7ym8juyg\": 561831,     \"LLPkdVJiCF\": 862262,     \"T6aNhcyrVK\": 4410269,     \"nfhIc0RRhD\": 2541443,     \"SjC1sTo5UL\": 2498071,     \"sKFeOtrZ21\": 1976551,     \"pxOcGp5Vr0\": 545884,     \"TOKHyC4t4h\": 4936655,     \"1G25EAOhgx\": 2325111,     \"KFBfJhjJrC\": 1780249,     \"nZ1S9k7UoK\": 3902742,     \"GqmmeP1LBb\": 95492,     \"E9PKAcZMyG\": 173573,     \"PtN2qmiWzQ\": 4994944,     \"hiHEqRaWIu\": 1430249,     \"XSDf11LfoG\": 2014061,     \"4kWfvemxuI\": 2811167,     \"DSRCfl6rvT\": 2065910,     \"lWVfG60XTb\": 76081,     \"jo6fp1khN7\": 4197700,     \"J6NXOTxqVn\": 3097997,     \"iUeVGdNGnE\": 2019023,     \"cAUUX7SSf0\": 3827372,     \"EMv4ZLr2Jk\": 3825084,     \"tNGkC3Bhwo\": 1833000,     \"EnvfKGZzGc\": 4510432,     \"O6wJDMqjJq\": 1274060,     \"ISQ55CqVyB\": 3113246,     \"rwcsWpARwx\": 668939,     \"csiTL6ydFj\": 2546350,     \"mmjK0nfery\": 1999682,     \"nEHdwFj0x2\": 351045,     \"7ROoeCIctH\": 4591647,     \"OHeIp6mL9f\": 2105304,     \"UfZdoqhs7y\": 4661851,     \"W1uSbLeNWz\": 4759883,     \"KQk6Xrv9Qz\": 3489335,     \"Zxna6I2Knw\": 3763812,     \"1IJCrU4VpX\": 4254369,     \"Xf2O8DaNIc\": 4445797,     \"AjQ6JpANZf\": 4653635,     \"nOrZpRbk3o\": 3473800,     \"FpSmaz4Ky5\": 4633602,     \"NauENg46Jk\": 2160893,     \"UKX8oop7MG\": 2933323,     \"QZtZTEREtf\": 868311,     \"MeRlY41m0V\": 2369589,     \"kxuQe06Dvg\": 2104416,     \"nPZNPIOpT8\": 4126632,     \"fQbyYCS4aL\": 1637550,     \"axO8Gv0krJ\": 4344582,     \"FIbcxlDMuL\": 2453701,     \"4HyNr8rbdh\": 2663880,     \"5WkdCt0RHm\": 1893476,     \"I5f55hCmkQ\": 438537,     \"l3iNXHLpKG\": 3174431,     \"QO5KSTSo2d\": 860680,     \"Uyei5tWBE1\": 2010799,     \"X2DI2zTrYg\": 4071487,     \"wX1CMR0FFf\": 4716990,     \"McBr7E3BHr\": 3332135,     \"Lc8Z1pZZHP\": 3748729,     \"SW5N5Pkcg9\": 4190054,     \"snfurnGxjz\": 4428812,     \"uPxn5V5p4R\": 3096146,     \"knt4hUOyGO\": 1335106,     \"0DdUNuFAbU\": 3407064,     \"gtDdeMshYJ\": 888427,     \"ewbWHAytd9\": 2836262,     \"n40FfX6eHs\": 4010663,     \"y6Qf2QIQjH\": 2164684,     \"Hsh4UdqO3Q\": 5181042,     \"3aQch7piuO\": 2814883,     \"zhucSvpOcc\": 764271,     \"lSehB6PIMi\": 1102410,     \"Qoz7oV3F3l\": 4435802,     \"afh7k5jhRp\": 3951913,     \"71DX6efehw\": 3308937,     \"nIUHuDjx5A\": 2226594,     \"XZhRwtAuxn\": 3197390,     \"4e9KFhjr1C\": 4137890,     \"NzqgZsdE8p\": 1875078,     \"6SP5Fl61MM\": 5226994,     \"ovhC0TgMAx\": 2755618,     \"FkrWW6gvIP\": 2802272,     \"EyGqGZGS2N\": 3393122,     \"rEpEDmEQuT\": 2737220,     \"UDNla9iOuf\": 632245,     \"Cxq7weXsiv\": 1686282,     \"uEve7Ps41G\": 3927435,     \"CkngI2yZLD\": 4154737,     \"CKyQZbKnH4\": 2931642,     \"Z4FhSgIQdf\": 3394944,     \"mBEg5i7hww\": 4858865,     \"UYBDItrakm\": 771458,     \"PqTc7gAG8p\": 3195856,     \"ghin59xDud\": 3752042,     \"M6E3N7GANm\": 1369410,     \"mCNsnLAw8w\": 3178321,     \"krz6x29ZPu\": 1189518,     \"9oyhjHmLA3\": 2790549,     \"rCP3jrPi2y\": 3261268,     \"Zz0HK3Ny8u\": 462966,     \"cNxNYJVL9q\": 2269561,     \"cYcIfgnzS0\": 3932247,     \"d6ORDEjr68\": 2444878,     \"hCiRqQrPU8\": 1356719,     \"W62WlUBKqw\": 421619,     \"2U6dxu5COS\": 1250454,     \"bSiRYS5JH0\": 3040804,     \"bAmPt6Rut3\": 816440,     \"Bbc5hrBgYq\": 2100706,     \"f1UpslhlK4\": 3245679,     \"Dn9MR9VIxW\": 5289682,     \"GASLZvI6yc\": 660086,     \"bFkE3svBoc\": 924414,     \"qbiqdf4gkQ\": 242692,     \"WUgyKuX5GV\": 4438038,     \"ANJ0zjg656\": 369850,     \"4xn8zB4sKy\": 2508248,     \"qHKMSTO1Xl\": 4165329,     \"LZfLelABmw\": 1142490,     \"wl9A9QyN9O\": 1270847,     \"kuPNg0ThuY\": 3144574,     \"SYX09YwRcC\": 2529364,     \"06sxOkkmpU\": 2215360,     \"sdpDmaq6HH\": 1821771,     \"I15C8I53A2\": 2870419,     \"tMxCUUAorc\": 1754493,     \"6lWaQgNaGX\": 87006,     \"Q8JTq3b3z0\": 1232080,     \"FTn4oJmxOY\": 3388887,     \"bg2etuA94v\": 231769,     \"tlUuux1H1s\": 33972,     \"oQ92HYTCUj\": 980450,     \"78OJl6jJAw\": 1757285,     \"mWOaY7sEaB\": 2524691,     \"YoFHjmrdLD\": 3844319,     \"2H12x9ASGK\": 1344298,     \"BoKaYoKjJK\": 428264,     \"RPdsMGxsiS\": 3726540,     \"S0Oy1Hnzwo\": 2734111,     \"fFHEbNrUcu\": 5187077,     \"nOwaxsewSa\": 1632979,     \"mxrAd2QbED\": 2139762,     \"E49ncVRiRA\": 2098145,     \"5Dn3pGcGNO\": 5279613,     \"ri4CJALIZ3\": 168470,     \"BDM7LbI1Oi\": 189839,     \"HdRf5uLFi4\": 4843903,     \"K4X2RJv2gN\": 785876,     \"qmpt0RQcgc\": 2215047,     \"BKKhhfAnEt\": 4793384,     \"fiJdyK13Jl\": 4129037,     \"oSLU4GuEHX\": 3212665,     \"uQyntbAHak\": 1173105,     \"bwYooeToi2\": 656609,     \"kMM107MAUi\": 3691573,     \"29rBcUHzAB\": 4290782,     \"ah9DGBbueu\": 2651876,     \"7TsoUByplY\": 3271592,     \"XYeDetpbxx\": 890579,     \"VzJbsQcCtG\": 3057221,     \"nFfGvwBX3m\": 5199828,     \"o4trYN7S4I\": 2024944,     \"Xi6yZ8F2H1\": 4875013,     \"ySbrqyZMP8\": 103805,     \"iEGmPovltq\": 2048537,     \"4APz9bZjzf\": 5221321,     \"WG04yeo99r\": 306201,     \"oXNtt6T2NA\": 3688551,     \"duDA77equu\": 1526472,     \"yUz21dmBTS\": 3415807,     \"7DaXTRxrm9\": 3770085,     \"Um5XyJ7Fgm\": 2600650,     \"PJvuctZKZA\": 1223477,     \"2RR71yBAab\": 3292425,     \"plnLSuvUlD\": 5226790,     \"NxOSWoO3Gz\": 1930671,     \"iN2rbaPWxa\": 5285847,     \"6xpuq3UBhd\": 223862,     \"jFljOO153H\": 2065803,     \"SWQE4f6cP2\": 1115573,     \"YQheYqhS0B\": 4278922,     \"sz0iFHqAX5\": 1943564,     \"aIiCTeqy4N\": 3675925,     \"dKMfWXxojo\": 2200051,     \"7sezIbFag2\": 1360554,     \"hGsvAhijQu\": 4408725,     \"j3567FBlsa\": 4881903,     \"g6ynpGWpBw\": 1953436,     \"O6bTFseFvs\": 3915861,     \"DseiOGgyua\": 191657,     \"wWN8b7Zdmy\": 5279304,     \"xZZsqPG9lO\": 5191101,     \"WkqcFXSF3F\": 3531581,     \"XA2ljv52bL\": 4640826,     \"l6eXwTVEtc\": 731761,     \"xCCOJHO4di\": 644341,     \"YqXk4Rr7bA\": 3480992,     \"uzy9p7vYDW\": 2047003,     \"XuVTbpYyz9\": 4946012,     \"dv0AJQIEgx\": 2703492,     \"YZy0rc9ZFX\": 1157490,     \"BaGMoDUMRE\": 4527049,     \"fiOxTiszqX\": 3194182,     \"8iQlqMrtZx\": 5065708,     \"7RGqfQ8fAq\": 209266,     \"Du521qNFsc\": 4960192,     \"3dgdQWHnRC\": 3311925,     \"idOUJDVmzc\": 3386631,     \"mgpqzoNkrk\": 4811047,     \"CXrPvDbnsT\": 1311498,     \"PbP36Z5VSa\": 3467024,     \"OWhNd88AOu\": 4736489,     \"KxFvSmZ51z\": 3003342,     \"2q4xdGxWNX\": 2059176,     \"UoBVjZeSVY\": 3942994,     \"A9kv3W29jW\": 3313433,     \"fahtVqJwnZ\": 3065623,     \"hWfm3IzwQC\": 548402,     \"iEWHdFgJO7\": 5259818,     \"3YPJy80f2s\": 5253310,     \"mqVoyHGaqR\": 936766,     \"Rkh13rOcSc\": 837890,     \"jVRYtacEJq\": 590103,     \"h4sN8kwC2h\": 4394903,     \"hNY9SrPBCJ\": 4429484,     \"AtT1Rz104o\": 2860545,     \"U9nG1zc7Br\": 4055204,     \"RRHT35Xv8h\": 3842726,     \"8mKawY1AtP\": 730772,     \"BuZsKVIFJ1\": 877105,     \"uz45Qtk89C\": 3059525,     \"4MNjGlx3G2\": 4558720,     \"jhi3jP4xBC\": 3943500,     \"HkXim1YugG\": 2871849,     \"ZcPfXhN8dl\": 1038971,     \"U3lmUx9nTY\": 2608413,     \"WbSKlWyvqu\": 2170332,     \"fE7HF720QS\": 1787526,     \"bJRKAkUcUG\": 4214653,     \"DjkkiQxyjh\": 2942256,     \"TW94r7E2ca\": 5237650,     \"uq4VEebQhV\": 3233187,     \"z6qfSHcXhq\": 3747964,     \"TsSRSi6jEA\": 4117218,     \"a0aLmglbVj\": 3736766,     \"WE8UskVQX1\": 395109,     \"SlgqNdP9oA\": 423729,     \"0mE3a9Wgda\": 905320,     \"Md8u0oL9Su\": 3551228,     \"OPQ07BdjAR\": 2380023,     \"JAyJljDWPN\": 2444166,     \"artFD7i3by\": 2323616,     \"lvkqNCLJDq\": 4528807,     \"i3Ttf5oXQn\": 4745852,     \"AjrO3p9L1Y\": 192031,     \"zSjBhWbYur\": 2633894,     \"xoCb75NNth\": 1391859,     \"YrlTpp2LJt\": 5221802,     \"J6ZD0E3Tjd\": 5032967,     \"8LZ6SPE5c1\": 1098707,     \"X3BBUcRfRw\": 675294,     \"hO0mmDW3Yi\": 1441964,     \"1q8Kp0iEV6\": 4954569,     \"fXEUxkQ0cv\": 2073371,     \"2l0Z6906IO\": 2178882,     \"asc0ys9Ovo\": 3704970,     \"bKDUzUd5PT\": 3828144,     \"KCuTaPbk3x\": 5223301,     \"nwA4lKaFJp\": 1148359,     \"PpPwlDEnXk\": 2874319,     \"UvYlHHRDnx\": 835300,     \"WKIE2MQIAc\": 2374421,     \"A5DreY89on\": 1589397,     \"eqqkMPPPOb\": 328626,     \"9Pwp267AXI\": 1315355,     \"ZMDryGpRh0\": 2197368,     \"6TgvgVQ1DE\": 4806747,     \"oUBdpkgXG6\": 5246494,     \"b7XcfbZ3hT\": 326282,     \"LeP08dCJ5Q\": 4084806,     \"7W1CVwr0jU\": 4667457,     \"nUUvOBGQTe\": 1681649,     \"SIBuqMvqaK\": 611142,     \"HCtCQ0ptto\": 1938003,     \"IMyORbU6qj\": 3681934,     \"0jFtZdOWsI\": 2830042,     \"oAHYrQxdZl\": 4824110,     \"OGed0aCHxd\": 4995721,     \"GA3faKP0xd\": 5214588,     \"mncSz9AlTZ\": 1684705,     \"98vxTwgUcb\": 5105927,     \"qFV6d7fG1C\": 4109750,     \"XpYRhPeJw9\": 1811140,     \"Qsx1YjaOSV\": 4741503,     \"dBuDRNKsRi\": 4509556,     \"cmseEbnFcl\": 3061928,     \"8HfOQaAGYw\": 1077344,     \"kCZ5zCGUGm\": 3963498,     \"x3cnAhQf0r\": 198295,     \"W0LAcs9gIM\": 169010,     \"gfBuTg28w1\": 1764323,     \"6upsCD1mML\": 4554498,     \"YDkJBKmwjN\": 627445,     \"An9b1KOyr5\": 2613927,     \"zHCDDjpVjy\": 4896648,     \"7L91H8jHXS\": 10600,     \"ePRfLpWuIT\": 1692069,     \"fkHPkZTp3N\": 34566,     \"FIQbkXnM9s\": 1887044,     \"DQm29SNVEA\": 1049414,     \"JN7t5cVkQP\": 3720377,     \"6KzP783BIj\": 1351150,     \"yLQneo53vM\": 2643878,     \"9d5jqeQEs8\": 1927754,     \"WOkd9gkcYT\": 473505,     \"Bh4wUMFnVS\": 1275102,     \"IAgO4ftm7t\": 4818014,     \"R2FQGvY0U3\": 690690,     \"C4E5QsPTI5\": 3644649,     \"6pCVJrmvw7\": 2814540,     \"nXyPRPawxW\": 3384808,     \"iCPxZsRHOe\": 3293937,     \"TgJ4YwLmzu\": 2289672,     \"cyPwudF59P\": 3270663,     \"vDBQpYcXyA\": 1154199,     \"9DKX1M4x4k\": 5213940,     \"WQegfWU2xx\": 4829363,     \"VhRRGLHbMf\": 791454,     \"UXVV2C3A0L\": 1336911,     \"nuBMu6XBJz\": 4177039,     \"p9CENVFEDj\": 4906662,     \"mjWeTslUlR\": 1989226,     \"rsiWTBwngo\": 429875,     \"e0o97MN3GJ\": 1494305,     \"WmazIgoDq4\": 1595597,     \"wuyRSYJOmd\": 1157910,     \"uQNA0gc63i\": 1712033,     \"XoVjSGfPBF\": 3620046,     \"UZWE87vKeZ\": 2707730,     \"OTCStrMm4C\": 140945,     \"pfeSbWpjoj\": 1409139,     \"k4AeGnyznY\": 1225309,     \"NnAVdq04YO\": 4750084,     \"2b4OEu9B0d\": 5157755,     \"NxLa4dM0py\": 3208139,     \"88qzjyNJGJ\": 2232654,     \"hSldGLJoyg\": 3297226,     \"j3DoikfciW\": 4063745,     \"r8NevPk0cu\": 2020910,     \"3Rhl3EebQL\": 1941776,     \"ewnUWNJ6XO\": 3019659,     \"C6gHHQ7jFe\": 358470,     \"bnBJtRfQpj\": 2930594,     \"oqseP9vTZV\": 782884,     \"JK1PDMQmUO\": 2030963,     \"B5gqDpZP9g\": 2889404,     \"SJjv7rtolB\": 1673978,     \"RYwI7U4AnT\": 724379,     \"bNpuO5yySm\": 3026006,     \"pVyYN8xfUj\": 1165235,     \"pysW4gDKvW\": 1579578,     \"PBK1qcuhD9\": 2048277,     \"1TZ9DlSgm9\": 2620358,     \"MxLV2HS3CK\": 4980264,     \"LRVtPs9GdF\": 3927346,     \"NGw8aIKiqZ\": 3994991,     \"bnO0D0s78K\": 319141,     \"i0hILHxtNb\": 4471374,     \"8LEFRbrBUy\": 2614680,     \"qmOPxYgdnI\": 2775500,     \"IWH8bBmUYi\": 3227902,     \"zeVxEOE41h\": 3128977,     \"ZYpYpNEQi2\": 981992,     \"y1kjYKqBvH\": 1410438,     \"yA5lnbt4Ij\": 4913340,     \"S9TC5tB63K\": 5164371,     \"0ZfLr25AGg\": 2496658,     \"4g0EQjw4U7\": 933405,     \"cwZd8ymRZZ\": 4667686,     \"4H2muzJSJQ\": 1719444,     \"ygXP2VAXYT\": 1536193,     \"AEpajEMfDf\": 2249956,     \"t8RAWh7PtU\": 277057,     \"kcirosFi8u\": 2970975,     \"d5aRstRidI\": 1639693,     \"KdqOnkgola\": -984,     \"sldHAAwwKf\": 1252754,     \"Z9g4bhfpog\": 2997534,     \"xuMvig6lFX\": 3561181,     \"6RijMjgtgM\": 4519916,     \"bBCE0rPA3H\": 5288853,     \"5ilOExnDys\": 837701,     \"N3PNd7xiVG\": 4303072,     \"czLJXi1dz9\": 4131090,     \"l21N1vgjjU\": 1397563,     \"BgMnbZ1R3K\": 1488367,     \"b4W8fSS585\": 5164762,     \"0YPEVf7ZGX\": 1475605,     \"bPl0dD89tk\": 4528192,     \"YsInI1Gdhi\": 4458860,     \"JBachThikw\": 3128475,     \"kbaSNw3PPo\": 2153962,     \"AckeRLlWuS\": 4473339,     \"ylECAKQb2c\": 722096,     \"a5iC5mw0Vq\": 3087453,     \"aTZKqGOy4n\": 5057628,     \"vwLZIXqXC9\": 5144211,     \"ylscYPfBbZ\": 614809,     \"70vig66B3L\": 3310875,     \"soG7JPRD3I\": 185650,     \"PqvvuB05Z4\": 2835013,     \"aNQYOpZ8tn\": 5063689,     \"nPRgFGHPZT\": 4024424,     \"8iZp714QRZ\": 4954099,     \"ZqlKUqKS8N\": 185054,     \"wGsJhTwnqs\": 1329283,     \"kvh3Lkl8cY\": 3227417,     \"Dpb22P89xk\": 140979,     \"fX1QoB3MHQ\": 5228957,     \"2AdVlYnQc1\": 1273898,     \"N85beK3bCM\": 5168879,     \"ZWmfg9sTwH\": 5298964,     \"NHPbOBWGA3\": 3674829,     \"WdLxRshsWS\": 2794561,     \"0lD1wYS4Co\": 510109,     \"qSE5msEKMz\": 2463584,     \"ZAhKuFt0tT\": 1997380,     \"b6GuQU9Tir\": 2640383,     \"SbIeChG4Du\": 1602353,     \"XaehJ6i11L\": 1265631,     \"RjBI3ktewF\": 5229795,     \"JKO2rzEl0e\": 3072709,     \"NTYvm6AGGn\": 3395856,     \"DAUG0lkRJX\": 3432735,     \"66S1Eu1FQS\": 4601529,     \"u7BEgIpg2m\": 760036,     \"KZpDvQjMTR\": 131475,     \"3NHJDUyBC9\": 4155278,     \"AFtRRBDvmc\": 3844209,     \"rwYe5vCnsw\": 3677575,     \"J4vLaDj527\": 884468,     \"XPPKkIYPZe\": 4254826,     \"s3Zgi2viEB\": 4489212,     \"QKJp56miqL\": 4714866,     \"qCEd3aNmvv\": 3364816,     \"XJutIxvkbc\": 3508757,     \"pBNQtUUA1H\": 3235436,     \"kysSzobVIH\": 4156039,     \"eQzWwwfsGP\": 1769154,     \"frDaTyKkDH\": 670533,     \"FrJ4kHQadl\": 3008756,     \"A6nJ2OE6RU\": 3582591,     \"fWSj1NypLf\": 3320313,     \"rVgrl6o0rx\": 4869223,     \"RfTzXy3Vsr\": 1570628,     \"eJGvRVXTCs\": 4677104,     \"FHwK10SjD4\": 2530238,     \"uodSoh4F1d\": 2821742,     \"FU3z27QeCw\": 804024,     \"0Qemi3ZX5p\": 5258387,     \"5mkaXaIdXK\": 3732767,     \"BlgNnnEJxd\": 3757915,     \"cazPAjSnsX\": 296757,     \"xNu0k5X13E\": 387260,     \"yovPWRQqs4\": 2266816,     \"Y4xvuG7SwG\": 2861933,     \"fzdLzs4HTf\": 704159,     \"yLOR2z0e3q\": 2674520,     \"vtChN71Us7\": 4604059,     \"ePH8fO5M4q\": 2154845,     \"7e7JLlsGkY\": 692619,     \"PsMU5gbZ8y\": 4687310,     \"LnqNl92W7C\": 1907947,     \"NxGcPmbOPl\": 4276803,     \"ZCfnoaM9gU\": 4295190,     \"AAgw8muiWf\": 2995290,     \"b8Id5njfzR\": 4511050,     \"8fmTh2GMTa\": 317496,     \"6sy69EIk7B\": 2353867,     \"eGPPBn32Uw\": 4574453,     \"7e4M0GRDMH\": 3599126,     \"SiJu9h8suf\": 4464452,     \"RlfhzBVDdY\": 5218434,     \"JmPEi0S0pR\": 4440284,     \"ZQTF698FF4\": 337261,     \"u7C7W80jvb\": 3241368,     \"qAq2nsVZ6S\": 3812352,     \"uSu74PGwZs\": 4244162,     \"tKe0onzPJr\": 3254487,     \"QLlVCRMWgM\": 184473,     \"TGDDSm5Adn\": 5024319,     \"uq7GJBl6eF\": 492281,     \"XPxRzPgu92\": 2277066,     \"YWzfFundEp\": 3320569,     \"g3KLuviWKc\": 35672,     \"MgXNhbJs59\": 2622556,     \"oUhTP1K5EH\": 214872,     \"Bd9ZWZMRDw\": 4509144,     \"fHimiIAGgk\": 5197436,     \"mgltY8Mfq0\": 428176,     \"ls7QLUB3wW\": 1180194,     \"lHhiG3MOAv\": 2870959,     \"GaGb0YbkxF\": 1693400,     \"Ho0AdyFOHP\": 2124864,     \"564mASWnlg\": 429233,     \"4kgS1HAhR6\": 3534890,     \"0BtBuzABAS\": 4364160,     \"sMYxPTzPVh\": 3448676,     \"szj0RPBmgR\": 5010830,     \"km90KcOp2K\": 2092301,     \"VNbkAvlH7o\": 2655871,     \"JooFnwABzc\": 4880028,     \"hVO90WOBjS\": 4674997,     \"xggQpn5s8c\": 4117038,     \"RjYvQgLjLG\": 3175313,     \"ivpk3hmzwY\": 400766,     \"ZTM0nExved\": 1753783,     \"88srvevaaU\": 3500445,     \"9cqIZE3A4F\": 1276353,     \"oGUpTcbkl7\": 2936262,     \"WV4PnxwOP3\": 3216838,     \"rq9HzEsnlL\": 1119895,     \"ZbkfAVCQO3\": 4353314,     \"2gRA8b2lBy\": 3198209,     \"cZ3mJhJMIL\": 60918,     \"ABqdREhizE\": 3354855,     \"MHMeBVaivC\": 554172,     \"oPCpIHcxXn\": 734992,     \"vkI6TdkVWp\": 485821,     \"LKzvuJTcie\": 4152839,     \"tkgo7mFpFE\": 104183,     \"bUo08BSlGU\": 3899044,     \"2vUu0R9KDf\": 2235614,     \"pLzZJofZII\": 2133057,     \"5LwkOEsvA9\": 624066,     \"P2SqdVIu5D\": 3436081,     \"ToZzWnFDph\": 5159125,     \"aVirLfSIVo\": 178281,     \"4YMzwanW0V\": 5178797,     \"2QTkOIEO8L\": 2873495,     \"MpXhe3YUI3\": 2479275,     \"4gO3ytGT5u\": 985551,     \"Yt0AuNY7uk\": 996252,     \"SRUAt6Ygpg\": 465119,     \"aLVUBOPCzE\": 1638909,     \"G9amrT4iEG\": 3860949,     \"jRfVpOrBph\": 5025898,     \"7ixfh4nW3M\": 532270,     \"1PP71p5giU\": 1166163,     \"MCc6ynm7re\": 2193487,     \"PNyKmHnsdu\": 3955609,     \"dhscWuu2YX\": 2856090,     \"Ln36eMrQb3\": 1693347,     \"okkdTK0qzE\": 1557001,     \"ya0822PAKf\": 1097549,     \"EP3721YLaY\": 5171232,     \"UN8SDIgaIP\": 440623,     \"VxHORQh0Ef\": 2154110,     \"fregabiVyR\": 1893947,     \"70XW2iycJM\": 317220,     \"CqNhHjPl5D\": 33388,     \"uwsgeh8JJc\": 3954970,     \"srLBmhF8ad\": 2309973,     \"XqHKw0d0M3\": 801032,     \"5uAY9w9yd1\": 424037,     \"4pAvnPA3Mt\": 2307022,     \"cJIqJrzTRo\": 2487009,     \"Y102ciGjvW\": 2983447,     \"sNAeJEqvo1\": 4317774,     \"CXrWU5Crye\": 504379,     \"yg17ztSFoy\": 5280048,     \"7jVQ9FYe99\": 3631927,     \"TQQu5DjGgw\": 2923942,     \"QWN4Vdf92b\": 3427052,     \"JR4yH0WX5o\": 3985795,     \"sj2q0b6DDw\": 3748157,     \"Mn9jKwBMyC\": 349639,     \"25VVoIpPAd\": 2950492,     \"fmZCylQ4TS\": 3654582,     \"SezoAZMkXy\": 4594543,     \"GoiS5bGKG1\": 2056027,     \"jr7jkhXHMB\": 1470340,     \"YWwkkftWOm\": 4739412,     \"yqJgR0CdII\": 621858,     \"wjCqRh0ioD\": 4689025,     \"JacalFFRkM\": 1303926,     \"CZcak7u0Vb\": 2686523,     \"EIx02wWsMH\": 2925175,     \"xUWi3y15Oj\": 1385465,     \"85cPXoDNJz\": 1566450,     \"SfW1DvKI3B\": 4170212,     \"1ihzhED0x9\": 3985633,     \"1RNYxnwa5B\": 564114,     \"p56ZhY9q7E\": 1512082,     \"3HfXiGpsSh\": 3408271,     \"zm5z9pYevR\": 2912207,     \"SgFQa3Ijsk\": 1150277,     \"qDMYBe6V7c\": 4379728,     \"gx20iV9HiE\": 975757,     \"R0Hu9yIR2R\": 2957019,     \"RWG2thdR4K\": 4578315,     \"4WGisECmKw\": 4839285,     \"GRU2x1mHbR\": 2830393,     \"XbmHM8jaPQ\": 4343483,     \"Amg58QI6GZ\": 530854,     \"omtnUDlhMo\": 1690490,     \"1FODvrjgap\": 418974,     \"r5hFqw9SPL\": 17577,     \"u2fYFshs0l\": 1974201,     \"aHTPBKgHdK\": 1604622,     \"gl0LO493lY\": 3988092,     \"YGEd35Rgow\": 2143579,     \"cGhwBSU2zc\": 4440143,     \"P0aBwhefEb\": 3674291,     \"cyELCf7Q26\": 3715278,     \"Qzhq7zGWBK\": 559203,     \"WNgszGQ2rg\": 2792217,     \"00V69xHL3G\": 2631269,     \"rkWrtbuczK\": 4917515,     \"mPFTLimF70\": 3606477,     \"c3qjRTAWfr\": 2876462,     \"6FzoHRX4QX\": 3248586,     \"yvyFA2ogU2\": 378305,     \"E1gxRYAJ0B\": 2791909,     \"SEYCADkjcl\": 5256047,     \"ybtop6UBKG\": 3141113,     \"V9SYr3trdZ\": 2451564,     \"Sh9ouCJF3u\": 1202682,     \"4VRQKTt3wq\": 4439295,     \"oWqMznvttk\": 2986915,     \"2hLwdDcxd1\": 2119911,     \"575dwXn6VF\": 543709,     \"A0jILWo9gL\": 3232630,     \"0EEflRrQLu\": 3023922,     \"bv0S0J4Kpn\": 1042989,     \"w0fGsqDkq7\": 5042396,     \"uW0fFZtrYn\": 6590,     \"nkE87SZr97\": 3826087,     \"LjfZ3hfs4O\": 2464646,     \"CQgPf3RsKI\": 4868641,     \"EMJ3czB14S\": 2502075,     \"xJTuRntHPZ\": 5245000,     \"tVmWidyLHr\": 3363470,     \"M34ATYff7C\": 3895093,     \"2AYPfJy7Vh\": 4422885,     \"nLkJz7VO0a\": 4230986,     \"h9S92TrMSx\": 4127921,     \"jJXdgrxCeu\": 4115605,     \"GmGAWQkoAv\": 2552236,     \"C3YWS6PUH2\": 4355300,     \"VGVmUXt62U\": 4206082,     \"o8IgbuJJeA\": 4020753,     \"B0lQAjysNg\": 1916526,     \"8Sd0n2ncgm\": 1978009,     \"1CffPhnaaO\": 1668963,     \"uyEnHozIQf\": 1817957,     \"egxpnFZQRt\": 4014830,     \"9vwv1sgyNS\": 2125032,     \"JYdgZozgo1\": 3609338,     \"ihRjLj2hCZ\": 479728,     \"8KBzjcJmlm\": 5127861,     \"ddTgTj6N7y\": 3102625,     \"Ip2sgJ4xEP\": 4218201,     \"fauDSRy70P\": 1278234,     \"U5TI97UaBh\": 1797455,     \"NKhzYQQEuM\": 1667325,     \"4HM7cuT2S3\": 808769,     \"Hotnflkc7p\": 1891792,     \"hJWmF1yblQ\": 4203003,     \"uBNylMAehv\": 2156743,     \"hmQtYFsyc6\": 2019731,     \"fHJLsAa2Xb\": 4398010,     \"9wpxVk8PaF\": 3026020,     \"x8lCChCwzN\": 4249855,     \"LEvAyKFy4d\": 842948,     \"iflHNOGxx7\": 546969,     \"kMXrzxaIlu\": 3127335,     \"k1GmYKzXGM\": 2150289,     \"vhwnIUtWCF\": 4923889,     \"dFJ6uWAb6c\": 1918602,     \"oUb5RbkaUV\": 5176905,     \"eiDrHPXIEd\": 1076565,     \"SmSfNoGXON\": 4388210,     \"3X9Myll9uc\": 1277267,     \"MC5hDdoGBS\": 4679490,     \"o27Yur55N3\": 3185662,     \"x6Yw7QM7pk\": 3229207,     \"hl7WqyUOsz\": 1390901,     \"UKdwZGe8q3\": 726845,     \"Dc2kRfLxaz\": 3773299,     \"W9Ry6pl1Xn\": 1151139,     \"FHoKHsExo2\": 1146417,     \"DUwZnVyCAk\": 589265,     \"xLMnMjuQMJ\": 1530996,     \"rVGag3o3rV\": 1383117,     \"LoWIqjQgEP\": 803612,     \"5fQcMtYEPV\": 2499258,     \"ShEALQOpBk\": 4653169,     \"qJ2cxtPTOD\": 3114093,     \"OM0YAvH9SH\": 2904628,     \"P9Nc2MKgTS\": 5102541,     \"LBczhPt5i3\": 3069652,     \"TlLLkXtF79\": 2438561,     \"my1z9lJs3T\": 4224168,     \"ecVTy03HAB\": 4682591,     \"v0c1E2HKvh\": 257792,     \"IXJT5kHycP\": 128057,     \"rn8FlCIN5q\": 1586324,     \"Y9jYJzddkn\": 1314145,     \"4rOwZvyFee\": 2345825,     \"hyWWAfpj1d\": 1147371,     \"lVTaIGh93e\": 2239774,     \"PyQEKj3huY\": 1122052,     \"wLCDds7lwX\": 1676668,     \"fpqqY9PpIv\": 4562078,     \"1QblwW5Crl\": 4010088,     \"H7NQsCSqRo\": 3257569,     \"S9hxALom0t\": 3430110,     \"jGIlksVdoa\": 3799075,     \"zuwBRvA9A0\": 1274861,     \"iDH1RkQlvY\": 2347179,     \"QZfZTDVNH3\": 3421160,     \"vgWaBJZlNF\": 2372851,     \"2CX9U4ZJBV\": 4723924,     \"XoiSkl6UIV\": 2255750,     \"F6YLBFgKDy\": 3403113,     \"uvMtey2kUf\": 1844699,     \"bRnh6iDz5p\": 2724163,     \"WhzMzzAB8k\": 1082320,     \"9IZxvZ7WVD\": 348028,     \"1agDPIvTxI\": 538248,     \"KaB88gTg0R\": 2484415,     \"kd7RbDMV52\": 1730687,     \"E1Xqv8GD3z\": 1098895,     \"5KJy8yysrp\": 1560334,     \"khZQKKaexm\": 1104959,     \"NzRsA3nuJv\": 469586,     \"1nchqIlwlO\": 3758718,     \"2CacVMCtnI\": 1538767,     \"tQHQR8ZWWy\": 101347,     \"WWs11iFHgt\": 2162456,     \"tHOjuQSQ4N\": 584548,     \"9xU9YrbZTa\": 442789,     \"IVCRIWmXH8\": 3138590,     \"hRnlZLKZW8\": 654164,     \"Hztex8AIh5\": 2907111,     \"R3jVHt80GD\": 883908,     \"H4Lf3Y1pnb\": 3446939,     \"orz7Zj3pFP\": 3808633,     \"IRcHE7I7I4\": 2876793,     \"RYfRItI1Fx\": 473672,     \"FgBoG2ER7L\": 3115531,     \"I0fSSKMb4b\": 2708149,     \"lV7uurttoa\": 4880001,     \"GgxYqzkEDq\": 1980058,     \"ijOjsgIJgW\": 2940152,     \"FgyCZUXbDC\": 4397644,     \"3SsVPfheXn\": 3211728,     \"nwDy5fWCOY\": 1693830,     \"FiodgJkDvQ\": 4574708,     \"NWVzlkgQ9O\": 3694907,     \"svQVkkbkuk\": 4796259,     \"8QktmGxx5G\": 275798,     \"1Ac2BSVrB9\": 4306246,     \"oVje86kItO\": 1802315,     \"7t94yQiTNJ\": 544785,     \"NWnXTcSssa\": 1465663,     \"52RztbrKra\": 141336,     \"JHHDKPZPS0\": 2542654,     \"MmRdLUnAnc\": 4480682,     \"tUSxgGRhex\": 3572988,     \"9weRxYqW7k\": 38490,     \"FPrmktSh8M\": 3938364,     \"mAZ8HJnlYY\": 1385172,     \"Uaav3oXmSY\": 2922760,     \"Ulr5VJx55n\": 3980896,     \"ZtCBs1senT\": 1153164,     \"C9mr8Z0ARl\": 4630047,     \"Hy9MfDgiRD\": 2310172,     \"Rm9rGfgxc0\": 1449739,     \"z75KXOnnJ6\": 1511550,     \"wKJ8soU678\": 3309507,     \"dD2Ey0EiaG\": 2690624,     \"QRc4wtHl8J\": 3127318,     \"c7bS3v5Oaw\": 5259548,     \"IbTg6Ud6M9\": 4428123,     \"7Avl61psKq\": 2272930,     \"xx2N7FXyly\": 1361533,     \"LMMFvE5f34\": 1385516,     \"t6D26RLnQ1\": 3419731,     \"xvSC6IgoP9\": 1523297,     \"8nnkfZjyZM\": 256928,     \"hhZuj3pawB\": 799196,     \"BgPUEo1SFf\": 1458214,     \"hjY4S791FL\": 2002332,     \"QFK9Wo3RvH\": 905932,     \"XhSruEP3wQ\": 585964,     \"Dp0z9jSFf5\": 1788946,     \"LxctKzw58x\": 1272860,     \"rHF1bkAbNB\": 2300148,     \"mXtp69IhRl\": 3034989,     \"6vNgZm3KDJ\": 4320786,     \"YoglNr3yS7\": 4613828,     \"v3wZ9H8b26\": 4212710,     \"bFm09hcPu2\": 1199473,     \"jH8n3dgAab\": 5137945,     \"XwodutkD1d\": 420916,     \"fVVa4NgNDU\": 1050741,     \"H1TrMiK72j\": 1603606,     \"YhdciF3pbr\": 2038325,     \"VGiBU3thzH\": 271473,     \"8FkmYFt4cP\": 868812,     \"1Ge05FP0CU\": 2818071,     \"XalyU4DTLc\": 672396,     \"zp2JCCGv9Q\": 709758,     \"mvetiu7vF9\": 2360376,     \"2TM6H9BUZK\": 3551157,     \"yHavodt95W\": 1196390,     \"9W8tLD8xeu\": 4197907,     \"DbxLVeIvnB\": 2577230,     \"svHVlzrKpA\": 932074,     \"EUTU8tsrYy\": 754083,     \"XrgImlnXnw\": 3609350,     \"8emXCOovW6\": 1166655,     \"7jkkRgHxZy\": 3963963,     \"NYT947xkh4\": 3479526,     \"6RazZm3jmm\": 4138818,     \"4DePpwC2yC\": 2286974,     \"fMun4cecXd\": 579950,     \"TbD5KrCzde\": 2565996,     \"YPJVe8acxY\": 1702194,     \"uQr5hVSmng\": 2272599,     \"f451cUb1Wp\": 789201,     \"4t8h13vUBW\": 2904421,     \"2qi8F0wEbn\": 1710805,     \"X7iZNcH1To\": 1139645,     \"IgxUtt6Mnv\": 1099259,     \"CccgEApjEU\": 444922,     \"lTgpIggPPV\": 1883519,     \"r3fNrGw4Ws\": 875322,     \"L9NfxSojsM\": 694713,     \"m5R2sdZlD0\": 265586,     \"PSA77u4UJe\": 989179,     \"NgAtmW99r6\": 5012610,     \"jAczaVhS6V\": 2225332,     \"zzYBi0ywrU\": 1268132,     \"crZjqBGe1P\": 2784971,     \"tgfbD4v8uz\": 3893352,     \"Ad2u8yOsxl\": 123394,     \"Nk3tcnjYzr\": 2763178,     \"y94F65Zh07\": 3443942,     \"M8srhM1aC8\": 1058248,     \"nZoRjvI9xH\": 2986450,     \"gdwR5OXyD4\": 476686,     \"JjJW5FizwL\": 5285288,     \"uJjjgkpF7K\": 2889893,     \"MBs0ZCUNiN\": -7239,     \"yfeiM6sTsD\": 4560884,     \"iv4Nt6j0qi\": 651887,     \"pgl2rO08ci\": 1175673,     \"wfkdTmYOAC\": 3007760,     \"cIJZMQuoKh\": 4181536,     \"zVjLnhHngo\": 4140988,     \"A8uTTIWveZ\": 3898636,     \"yChH6t9dgV\": 2944168,     \"VsKSVcE4Ur\": 2676626,     \"9Eb6UsnEco\": 4937863,     \"X8v5qLlZkb\": 2063335,     \"QJM41CTzPs\": 3688139,     \"c30vpy21Dp\": 5287979,     \"5VPVDaiBi5\": 3807016,     \"JXgLRH4iCL\": 3299575,     \"LMOfFvkZf5\": 2876212,     \"rewtBUKWvU\": 2214358,     \"dNvqgvUXFg\": 2121091,     \"5xMnL3QRHY\": 5110394,     \"GRomNvCdQT\": 164531,     \"acZObhDdc3\": 1402636,     \"Nm38msJcZ4\": 379510,     \"45GKl0644A\": 2390232,     \"2eXEBgNSdw\": 759781,     \"W7Gpdqb5Vo\": 735193,     \"t8u21sjSSc\": 3560072,     \"1bowrHL8SV\": 1332408,     \"OqeNpEp8Dp\": 5140514,     \"8jVtXUKf5G\": 3090295,     \"yAESELRJyz\": 87190,     \"jiXZhTwxfo\": 262558,     \"iuzYo102Ko\": 2817789,     \"HMpVMCH754\": 2990436,     \"nJ6dMQtuxT\": 3460726,     \"Gac6lSyPrK\": 2977651,     \"N1oID2xqIO\": 4354660,     \"esJJiN6vKm\": 3927301,     \"6wM1Pc24H2\": 536792,     \"klIWRSEWv0\": 974118,     \"IC8Ef0ungQ\": 2822719,     \"X6qON9cFFK\": 2370959,     \"7qoN5VN3fC\": 252985,     \"958A2PcTIy\": 1459333,     \"0tiXTXMRti\": 3993865,     \"FU3MQ2QnnV\": 1841347,     \"qonOyue0eg\": 4958345,     \"V7sWQVrXXD\": 2726346,     \"I5NPYlBKmE\": 4436501,     \"YgLDUmsTOf\": 1027319,     \"GzJ752GrEt\": 3048601,     \"kCOWmCxERa\": 4730579,     \"5b02jA3owR\": 835542,     \"RojusOrKfE\": 1101714,     \"642OPx0JDP\": 2845221,     \"YNPMMvcNqb\": 2452978,     \"PL6yvXo23P\": 506408,     \"sMB8QQzWN6\": 3001625,     \"Emx5EZWEk0\": 921491,     \"N0lJhDI0J9\": 2789774,     \"LuTS6PVgG0\": 757598,     \"MhXt271RMF\": 4942783,     \"rU6Seiihx0\": 4482410,     \"h9hraGCtAX\": 1726723,     \"URzJRBoR25\": 4869557,     \"hnhv1bL4NT\": 3470578,     \"rzhXBFRemn\": 3914058,     \"c08MpsDkXa\": 535053,     \"VRvrdvddUs\": 905649,     \"hCD2v1Nwbi\": 987930,     \"SDBwtdkEsA\": 698644,     \"FQVEPnEOXo\": 1369444,     \"5968o3OwKP\": 4215570,     \"SgQVKEZtOH\": 790009,     \"NZu16YEvLe\": 183487,     \"8Mg9INvkR4\": 1216578,     \"YWHwmzjVdZ\": 2590888,     \"0CZ02oFDP8\": 4679963,     \"WntV4qltvq\": 106499,     \"TDlfdqqnIO\": 1827635,     \"l9Z2bV2Q8b\": 1419629,     \"966RUESTk6\": 497089,     \"6bnXTrT2Nt\": 5189317,     \"QQ86xyvA7g\": 1743853,     \"V0aRu8C6up\": 3865778,     \"b26ji2iQHc\": 891079,     \"yKjO3rAgs0\": 661252,     \"xhYJ7XkD4N\": 5277172,     \"8NjDxCztkQ\": 196927,     \"Hg34J9rBWp\": 2526572,     \"QrIi6AewBI\": 3322014,     \"omrBwQHPJ5\": 2816170,     \"trWU9b9TYA\": 588968,     \"G5NI5umYCz\": 858374,     \"IiNPlalzri\": 4172008,     \"vpAAze7POS\": 5131194,     \"nxQyuktVnh\": 1803413,     \"QdcuVYrRgE\": 3782960,     \"A3KmrNEZbB\": 4328673,     \"aggqC48sB4\": 4551553,     \"SxQ1QTKNm6\": 1787280,     \"EZ2MB3m0kP\": 3279997,     \"tmRuruaSgk\": 3027840,     \"XrqDUPiRkJ\": 637301,     \"eFGvtHHVK1\": 5017646,     \"Hj8p2xdoeZ\": 4322133,     \"rZJgBp7GPM\": 4331323,     \"uiIx6nX8oL\": 5138103,     \"slRDxK8zOb\": 2895652,     \"w9VCCg0O2g\": 4902398,     \"95OqZbnDDZ\": 2394467,     \"bS29VvHzak\": 4384169,     \"PoGvaIjoRQ\": 3214345,     \"4Q3YlmfzPB\": 131548,     \"0N1uTLXWx0\": 1433143,     \"Q3ntdLHmBj\": 2033713,     \"OhuaagEiMl\": 930594,     \"RpNIZQzXky\": 1820462,     \"qhlLXS3YuO\": 4357015,     \"FUwHxfnmGy\": 4101088,     \"S5CTVO8kby\": 2688332,     \"dba4Hr9Kek\": 4020831,     \"N3WJlLtcCd\": 784729,     \"Rfaus8CIXr\": 4805703,     \"5aOKNHtbjl\": 2101867,     \"wxUywCaxGF\": 5025775,     \"0J89iZLa1Q\": 1382739,     \"qAkngtLW7f\": 1363602,     \"1b07gmZsry\": 734395,     \"2xDF3sNbPh\": 4918185,     \"hoyxpXBeUL\": 4184075,     \"a5MFksh0wU\": 816284,     \"ZEUU1GA8PM\": 2472579,     \"kTxBFAPrvf\": 3523085,     \"yV8cPqYyos\": 484558,     \"jnWcyNhi6S\": 3577872,     \"wrQBkrRer6\": 472182,     \"fgn55d8oWN\": 4712767,     \"uryyqNoQhM\": 4186493,     \"yeAZ8vvmG9\": 836900,     \"aM97Q1c7Fr\": 3301869,     \"yBon5cFMwP\": 3940910,     \"OT8nMEzDSg\": 3403145,     \"PGI8PWOthv\": 1601009,     \"cYbVdLkc5c\": 5245763,     \"gF7DH8zRwZ\": 4083095,     \"c26GeBs0H3\": 397039,     \"thzNCrB9iQ\": 1054367,     \"44JG2yCBob\": 3084757,     \"qy1pAxNtIn\": 3616350,     \"L8AHEEiS9B\": 1492933,     \"6mofCtGbVu\": 109525,     \"sasqCd22e3\": 4931524,     \"PZ2Ny3RA3F\": 274589,     \"nYo3tnyBdy\": 3977895,     \"XPjaLTA3TR\": 3320029,     \"cMqRkuqAt2\": 3123751,     \"qjo2MTK3ku\": 1149475,     \"R9IiOg7ahI\": 2237123,     \"L97IOPB41L\": 2971004,     \"DmAEu52imQ\": 2543177,     \"jLUlXFudMo\": 4136670,     \"ls1BfDFsmj\": 4721823,     \"cIgkMvXvEw\": 1641598,     \"r6e3CaksOP\": 1967575,     \"3Mc8FN5B9D\": 3658502,     \"J5xdE24Ogh\": 3733230,     \"ZB9mIVEnJM\": 2386526,     \"lJEkhxgvOo\": 4697365,     \"zYu5ENmpPq\": 518645,     \"ik6ArlR77h\": 716830,     \"PI0yXg0dqb\": 4420776,     \"VZwax1jCwX\": 4112699,     \"V34cfbt9R5\": 3771538,     \"f7byYEr1oF\": 4241800,     \"x20ELy7ySz\": 2513784,     \"WvcOufrEe2\": 5140979,     \"tFub7WDETK\": 4721198,     \"I8EXssMOfe\": 3051747,     \"pDU4Tg1rXR\": 4596728,     \"ylzDBiPDMx\": 1766553,     \"ZlEdsaIImI\": 1225437,     \"SlncqmbIPN\": 585124,     \"S74K3lGIyv\": 4247815,     \"0E4gYQvoUp\": 1958156,     \"bu1Jv8z2Wo\": 2528799,     \"byCUAzc4mf\": 1950491,     \"VSYkxSAN8W\": 3836852,     \"FatcfWWhkF\": 2912471,     \"BzQpeKu305\": 1414670,     \"dqgJ9e3a6P\": 3753283,     \"0mMDRVAiY5\": 4487401,     \"0ndm59zQoY\": 574929,     \"7tR4SwjtJP\": 3804360,     \"ZsUVPbZJVv\": 427300,     \"JYJleBiHx1\": 226929,     \"TNOfziNhON\": 4091912,     \"sfGvDsHCYH\": 4461811,     \"2DZ7x1HJPu\": 4119511,     \"bxsMcknMVl\": 23490,     \"PQZjPQSh6D\": 4487379,     \"ESpUdPooLv\": 1135983,     \"0rbwKdyQ6t\": 3069774,     \"i65gfXnBGd\": 775854,     \"iseP4afAqV\": 5119642,     \"TVWGjUyWAI\": 1349359,     \"5aSsHOSXm7\": 122787,     \"pK7t3RSs0C\": 907702,     \"jr9Gx0hdqh\": 1769195,     \"UevyiSyX0p\": 1821018,     \"YaGoKsXm9s\": 324772,     \"mSzSqaaMA1\": 2751099,     \"LLzMfreb3C\": 4940013,     \"RbKmz5dgHX\": 5086983,     \"u6iQBx9UFG\": 1089063,     \"9ixrQfTupT\": 2003770,     \"jsuWJTrHnb\": 3513166,     \"1uoyUu3502\": 520699,     \"ShYBkCaWGv\": 832117,     \"2cP8sKt0qO\": 4714219,     \"LT3tjB0fW3\": 3915030,     \"PpvrmReHfB\": 321702,     \"8TDNA3by8F\": 4805615,     \"7skX62B6qk\": 989314,     \"xscEXdfXCD\": 3292419,     \"HPtffHquMh\": 1575132,     \"KCSWI1B1tE\": 2909236,     \"RJC5mFBLYH\": 3322477,     \"NGE08LjWvV\": 3708578,     \"ZEkjJaQbIA\": 4152218,     \"AzXj8KJuoW\": 3772926,     \"UZrvThxoaD\": 2032431,     \"L7aitjpBTY\": 2968894,     \"4HnRapSwgD\": 2484536,     \"rbZ3qNhdad\": 2954873,     \"15nCs5Pi0P\": 1661091,     \"dC0Pu0ZhA7\": 215522,     \"9natagcfNo\": 242482,     \"qpWqONdOE0\": 1871570,     \"1Qf0Hl1i79\": 2447758,     \"Y7oFCOd7nt\": 1367718,     \"shO7keKiah\": 3899498,     \"FhlZn5fHD1\": 2882047,     \"uG1lQvA9Vc\": 2169851,     \"Vt5rDYFNef\": 3256285,     \"RaWd3USUfO\": 1305058,     \"c6jxbhFkuc\": 2148304,     \"veJYsWJ0SA\": 1228499,     \"swZRU6HTd6\": 1289118,     \"DS53CJBUyu\": 5158623,     \"vv26SYLCsn\": 2742898,     \"sxlhnh1QOR\": 5081756,     \"EoZ7kZwWwD\": 3435295,     \"GYqPRsBEeC\": 3539833,     \"IbIZ38TFUG\": 1286532,     \"twiB4m3ngL\": 579895,     \"zsLpgMcQSb\": 600709,     \"0Jq7CTl9te\": 2924707,     \"sqWNwsSbD7\": 1910176,     \"g2GwqAsV93\": 3252965,     \"JcMbVRT1Cx\": 2026226,     \"3Dvm8M1Xk8\": 1447019,     \"PR193lcX46\": 192447,     \"YA5Zvw39hm\": 845969,     \"EcJnxaCc5S\": 319078,     \"VCyYOhoS2f\": 1764960,     \"ool5QOJYH2\": 4516819,     \"53LADEkGX0\": 1535074,     \"zYgjTkArEk\": 4745549,     \"VRHCs4Pk6p\": 813947,     \"ONky6PRwlK\": 3595456,     \"W046acvaUo\": 5032677,     \"rU1UPwfFhh\": 2917685,     \"yxxHKg5i5Q\": 879177,     \"o7yY7jHW63\": 2313408 }", "payloadType": "json", "x": 240, "y": 200, "wires": [ [ "6e7363ce0516d9cf" ] ] }, { "id": "6e7363ce0516d9cf", "type": "function", "z": "1c61e459343a71fb", "name": "insert", "func": "const keys = Object.keys(msg.payload)\nconst key = Math.random().toString().substring(2)\nconst payload = keys.reduce((acc,_key) =&amp;gt;{\n    acc[_key] = gen()\n    return acc\n},{})\nconst ts = new Date()\nconst timeString = ts.toLocaleDateString() + formatTimeString(ts.toLocaleTimeString())\nconst timeObj = { TimeStr: formatDateString(timeString), TimeInt: ts.getTime()}\nconst MSG = {payload: {[key]: payload}, ...timeObj}\n\nfunction gen(min = 1_000_000,max=5_000_000){\n    return Math.floor(Math.random() * (max - (min)) + min)\n}\nfunction formatDateString(dateString){\n    return dateString.replace('AM', '').replace('PM','').replaceAll(' ','')\n}\nfunction formatTimeString(str){\n    const regex = /\\w\\w\\:\\w\\w\\:\\w\\w/\n\n    return str.match(regex) ? str : `0${str}`\n}\nreturn MSG;", "outputs": 1, "timeout": 0, "noerr": 0, "initialize": "", "finalize": "", "libs": [], "x": 370, "y": 200, "wires": [ [ "50a006a13902fcf0" ] ] }, { "id": "50a006a13902fcf0", "type": "mongodb4", "z": "1c61e459343a71fb", "clientNode": "132a80320b23995d", "mode": "collection", "collection": "mqtt", "operation": "insertOne", "output": "toArray", "maxTimeMS": "0", "handleDocId": false, "name": "", "x": 520, "y": 200, "wires": [ [] ] }, { "id": "03fb989f55554172", "type": "comment", "z": "1c61e459343a71fb", "name": "Playground", "info": "", "x": 230, "y": 400, "wires": [] }, { "id": "132a80320b23995d", "type": "mongodb4-client", "name": "", "protocol": "mongodb", "hostname": "127.0.0.1", "port": "27017", "dbName": "iot", "appName": "", "authSource": "", "authMechanism": "DEFAULT", "tls": false, "tlsCAFile": "", "tlsCertificateKeyFile": "", "tlsInsecure": false, "connectTimeoutMS": "", "socketTimeoutMS": "", "minPoolSize": "", "maxPoolSize": "", "maxIdleTimeMS": "", "uri": "", "advanced": "", "uriTabActive": "tab-uri-simple" } ]
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;ul&gt;
&lt;li&gt;click on disabled tigger and click &lt;code&gt;enable&lt;/code&gt;
&lt;/li&gt;
&lt;li&gt;re-deplout on the top right corner&lt;/li&gt;
&lt;li&gt;await &lt;code&gt;fill db&lt;/code&gt; to approximately ~160k payloads&lt;/li&gt;
&lt;li&gt;disabled and re-deploy on the top right corner&lt;/li&gt;
&lt;li&gt;use tigger under &lt;code&gt;playground&lt;/code&gt; comment to test it.&lt;/li&gt;
&lt;li&gt;use any monitor to check &lt;code&gt;RAM&lt;/code&gt; usage&lt;/li&gt;
&lt;/ul&gt;
&lt;h2&gt;
  
  
  Preview
&lt;/h2&gt;

&lt;p&gt;If u don't like to play with some playground and test it by urself, I have preview how it works.&lt;br&gt;
I use &lt;code&gt;system-monitor&lt;/code&gt; on &lt;code&gt;archlinux&lt;/code&gt; to monitor &lt;code&gt;RAM&lt;/code&gt; usage.&lt;br&gt;
The starting point is: &lt;br&gt;
&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ffqj3n54blhpwckuf6q44.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ffqj3n54blhpwckuf6q44.png" alt="Image description" width="430" height="34"&gt;&lt;/a&gt;&lt;br&gt;
This is memory usage after node-red start-up.&lt;br&gt;
Now I will trigger the data collection function from the &lt;code&gt;mongodb&lt;/code&gt; and u can see a gif with a problem...&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fipguu6u5jcp00z7sj823.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fipguu6u5jcp00z7sj823.gif" alt="Image description" width="640" height="360"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;You can see on a gif increasing memory usage when the data is collected from Mongodb.&lt;/p&gt;

&lt;p&gt;But the real problem is the memory stuck in the end:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fag0gtgloobex7m7z8vh1.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fag0gtgloobex7m7z8vh1.png" alt="Image description" width="422" height="31"&gt;&lt;/a&gt;&lt;br&gt;
here CPU is 0%, which tells us that Mongodb ended up, but memory is &lt;code&gt;2.4GB&lt;/code&gt; as a result and it's a problem with &lt;code&gt;GC&lt;/code&gt; and other stuff around it. It tells us that the &lt;code&gt;node-red&lt;/code&gt; has leaks, and not only node-red but packages for node-red too. &lt;/p&gt;
&lt;h2&gt;
  
  
  Solution
&lt;/h2&gt;

&lt;p&gt;For Solution we can trigger &lt;code&gt;GC&lt;/code&gt;, there are a couple of packages for it:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;code&gt;node-red-contrib-gc-trigger&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;&lt;code&gt;node-red-contrib-gc&lt;/code&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;or use another solution...&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;[{"id":"0827bfc6d8b563da","type":"mongodb4","z":"1c61e459343a71fb","clientNode":"132a80320b23995d","mode":"collection","collection":"mqtt","operation":"find","output":"toArray","maxTimeMS":"0","handleDocId":false,"name":"","x":510,"y":700,"wires":[["03dba01640826b64"]]},{"id":"45492c454bcc81f8","type":"inject","z":"1c61e459343a71fb","name":"trigger","props":[],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","x":230,"y":700,"wires":[["ee83bc446adf6184"]]},{"id":"ee83bc446adf6184","type":"function","z":"1c61e459343a71fb","name":"query","func":"const MSG = {}\nconst clear = flow.get('clear')\nconst trigger = msg.trigger\nconst query = {}\nMSG.payload = [query,{limit: 100000}]\nif(trigger){\n    MSG.payload = [query,{limit: 1}]\n    flow.set('clear',true)\n}\nreturn MSG\n","outputs":1,"timeout":0,"noerr":0,"initialize":"","finalize":"","libs":[],"x":370,"y":700,"wires":[["0827bfc6d8b563da"]]},{"id":"6bf59b41d02b845d","type":"comment","z":"1c61e459343a71fb","name":"Solution","info":"","x":200,"y":640,"wires":[]},{"id":"03dba01640826b64","type":"function","z":"1c61e459343a71fb","name":"middleware","func":"const MSG = {}\nconst {payload} = msg\nMSG.payload = payload\nMSG.trigger = flow.get('clear') ? false : true\n\nreturn [{trigger: MSG.trigger},{payload: MSG.payload}]","outputs":2,"timeout":0,"noerr":0,"initialize":"","finalize":"","libs":[],"x":390,"y":860,"wires":[["5e1f9a17b75fc33b"],["8661b33ab8b630f7"]]},{"id":"8661b33ab8b630f7","type":"debug","z":"1c61e459343a71fb","name":"debug 34","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","statusVal":"","statusType":"auto","x":540,"y":900,"wires":[]},{"id":"5e1f9a17b75fc33b","type":"switch","z":"1c61e459343a71fb","name":"","property":"trigger","propertyType":"msg","rules":[{"t":"true"},{"t":"else"}],"checkall":"true","repair":false,"outputs":2,"x":550,"y":800,"wires":[["ee83bc446adf6184"],["bf42b0049511ef6b"]]},{"id":"bf42b0049511ef6b","type":"function","z":"1c61e459343a71fb","name":"clear","func":"flow.set('clear',false)","outputs":0,"timeout":0,"noerr":0,"initialize":"","finalize":"","libs":[],"x":710,"y":800,"wires":[]},{"id":"132a80320b23995d","type":"mongodb4-client","name":"","protocol":"mongodb","hostname":"127.0.0.1","port":"27017","dbName":"iot","appName":"","authSource":"","authMechanism":"DEFAULT","tls":false,"tlsCAFile":"","tlsCertificateKeyFile":"","tlsInsecure":false,"connectTimeoutMS":"","socketTimeoutMS":"","minPoolSize":"","maxPoolSize":"","maxIdleTimeMS":"","uri":"","advanced":"","uriTabActive":"tab-uri-simple"}]
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;In this solution, we re-trigger the flow with 1 limit to trigger &lt;code&gt;GC&lt;/code&gt; with new data equal &lt;code&gt;[one_element]&lt;/code&gt;.&lt;/p&gt;

&lt;h2&gt;
  
  
  Future plans
&lt;/h2&gt;

&lt;p&gt;I spent a lot of time debugging this during the IoT project, and I have a couple of solutions for it. The next article will be about debugging and possible fixes \ solutions around it.&lt;/p&gt;

&lt;h2&gt;
  
  
  Problematic for debugging
&lt;/h2&gt;

&lt;p&gt;The main problem is node-red leaks. We have a nested object and &lt;code&gt;GC&lt;/code&gt; cannot clear it cuz we use it in the next functions or messages \ debugs. In the node-red, all communication with nodes is wrapped into an object and it cause a lot of problems.&lt;/p&gt;

</description>
    </item>
    <item>
      <title>Node-red Prelude. Blind inception</title>
      <dc:creator>Denys</dc:creator>
      <pubDate>Wed, 27 Sep 2023 20:08:53 +0000</pubDate>
      <link>https://dev.to/lgtome/node-red-prelude-blind-inception-14fm</link>
      <guid>https://dev.to/lgtome/node-red-prelude-blind-inception-14fm</guid>
      <description>&lt;h2&gt;
  
  
  TL;DR
&lt;/h2&gt;

&lt;p&gt;The hidden inception of a big trouble. Skip if you already know about &lt;a href="https://nodered.org/" rel="noopener noreferrer"&gt;node-red&lt;/a&gt; or don't wanna read simple things.&lt;/p&gt;

&lt;p&gt;It's my debut on the &lt;a href="https://dev.to/"&gt;dev.to&lt;/a&gt; and I wanna tell a story about an IoT on the &lt;a href="https://nodered.org/" rel="noopener noreferrer"&gt;node-red&lt;/a&gt;. I discover interesting things overall about it and want to share exp. It's a prelude article, don't worry, the second one will be more exciting.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://i.giphy.com/media/KfkuVMlL2SCKaKfKpD/giphy.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://i.giphy.com/media/KfkuVMlL2SCKaKfKpD/giphy.gif"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;These are overall thoughts about the &lt;a href="https://nodered.org/" rel="noopener noreferrer"&gt;node-red&lt;/a&gt; like a platform to derive IoT and not even IoT things further.&lt;/p&gt;

&lt;h2&gt;
  
  
  Prerequisites
&lt;/h2&gt;

&lt;p&gt;Firstly you must have knowledge of JS and maybe about JS infrastructure. And a little bit with IoT, might not, but why are u there?&lt;br&gt;
... knowledge of the &lt;a href="https://nodejs.org/en" rel="noopener noreferrer"&gt;NodeJS&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;em&gt;JS concerns are like...&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fsz8460tkus6f44gapysc.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fsz8460tkus6f44gapysc.png" alt="JS triangle"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  What?
&lt;/h2&gt;

&lt;p&gt;The main idea of &lt;a href="https://nodered.org/" rel="noopener noreferrer"&gt;node-red&lt;/a&gt; is to allow devs to write some functions to deliver something from the first to the endpoint. It might be something from the IoT world or you can use it as a platform for proceeding data from one to another place. But never mind it's a platform with a certain path, from 1 dot to another. Or you can use it like a tracker or reflector for some events, whatever you want.&lt;/p&gt;

&lt;h2&gt;
  
  
  Alternatives
&lt;/h2&gt;

&lt;p&gt;Umm, there are a lot of tools for automating workflow, like &lt;a href="https://n8n.io/" rel="noopener noreferrer"&gt;n8n&lt;/a&gt;, &lt;a href="https://noflojs.org/" rel="noopener noreferrer"&gt;noflo&lt;/a&gt; or &lt;a href="https://aws.amazon.com/iot/" rel="noopener noreferrer"&gt;AWS IoT&lt;/a&gt; for IoT targetly. Worth noting &lt;a href="https://www.totaljs.com/flow/" rel="noopener noreferrer"&gt;Total JS&lt;/a&gt; like a good alternative for it.&lt;/p&gt;

&lt;h2&gt;
  
  
  Add-ons
&lt;/h2&gt;

&lt;p&gt;I worked with flowforge, but now it's called &lt;a href="https://flowfuse.com/" rel="noopener noreferrer"&gt;flowfuse&lt;/a&gt; also if you're interested in forks for node-red, pay attention to &lt;a href="https://github.com/telligro/opal-node-red" rel="noopener noreferrer"&gt;fork&lt;/a&gt;, it's opal fork of node-red&lt;/p&gt;

&lt;h2&gt;
  
  
  Why?
&lt;/h2&gt;

&lt;p&gt;It's the simplest way to deliver your code, data, some files, or even creds or secret things to the cloud or on the device. It has a huge infrastructure, not as React :c, but great too.&lt;/p&gt;

&lt;h2&gt;
  
  
  Infrastructure
&lt;/h2&gt;

&lt;p&gt;There are a lot of different protocols to work with different types of devices, a couple of packages to work with UI side, yeah, UI side under the workflow app 🙄, a lot of pckgs to work with time, like sun events or cronjobs, integration with most of the databases like MongoDB, FluxDB, MySQL or even Redis, whatever, a lot of packages to work with cycles, countdowns and also it includes simple ways to archive, work with I\O operation (that important with NodeJS) and more, more other things.&lt;/p&gt;

&lt;p&gt;A couple of words about &lt;code&gt;flowfuse&lt;/code&gt;, this one would be used for better managing node-red, like doing snapshots, uploading it on the devices, and more things like this. Also, it includes user management, roles, accessibility, etc.&lt;/p&gt;

&lt;h2&gt;
  
  
  Lightweight
&lt;/h2&gt;

&lt;p&gt;It's an absolute lightweight thing, but about the dark side of the Moon we will talk in the next article 😋.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://i.giphy.com/media/v1.Y2lkPTc5MGI3NjExMDhxcWpzOWYydHlyNzI1bmpubnJoc3pjYXd5YTRnZTZoamN3eXZmZiZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/V5t9NlcSBgzvlsNdiH/giphy.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://i.giphy.com/media/v1.Y2lkPTc5MGI3NjExMDhxcWpzOWYydHlyNzI1bmpubnJoc3pjYXd5YTRnZTZoamN3eXZmZiZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/V5t9NlcSBgzvlsNdiH/giphy.gif"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Conclusions
&lt;/h2&gt;

&lt;p&gt;If you are a dev with no experience with this technology, just try it. If you want to practice with IoT at home, just try it. If you know about the pros and cons, why are u there 🧐, ...just use it.&lt;/p&gt;

&lt;h2&gt;
  
  
  Further dive...
&lt;/h2&gt;

&lt;p&gt;The delivery is absolutely incredible, but you just need to know about, hm, at least a couple of concerns to use it in the production way, ...and it will be a theme of the next article.&lt;/p&gt;

&lt;h2&gt;
  
  
  Helpful links
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://github.com/knolleary/node-red-in-production-workshop" rel="noopener noreferrer"&gt;Node-red for production cloud&lt;/a&gt;&lt;br&gt;
&lt;a href="https://flowfuse.com/blog/2023/03/comparing-node-red-dashboards/" rel="noopener noreferrer"&gt;Node-red dashboards comparison&lt;/a&gt;&lt;br&gt;
&lt;a href="https://flows.nodered.org/" rel="noopener noreferrer"&gt;Node-red library(infrastructure)&lt;/a&gt;&lt;br&gt;
&lt;a href="https://github.com/hassio-addons/addon-node-red" rel="noopener noreferrer"&gt;Node-red for home-assistance&lt;/a&gt;&lt;br&gt;
&lt;a href="https://nodered.org/about/" rel="noopener noreferrer"&gt;Node-red overall&lt;/a&gt;&lt;br&gt;
&lt;a href="https://www.toptal.com/nodejs/programming-visually-with-node-red" rel="noopener noreferrer"&gt;Getting started guide&lt;/a&gt;&lt;/p&gt;

</description>
      <category>iot</category>
      <category>node</category>
      <category>javascript</category>
      <category>programming</category>
    </item>
  </channel>
</rss>
