Dear JavaScript Aficionado,



We can easily say that React is the coolest JS library for building user interfaces.



But sometimes, it faces us with not-so-easy decisions to make&#8230;



Like:



Should we use a fragment or a div?



As you know, a react component can&#8217;t render multiple JSX elements. If there are numerous such elements, then they must be wrapped with a &#8220;root&#8221; one. Otherwise, we get the following error:




<div class="bu-code"><pre class="language-javascript"><code>&quot;JSX expressions must have one parent element&quot;</code></pre></div>



Before React 16.2.0, we used to wrap multiple JSX elements within a div.



That&#8217;s not a perfect solution!



Why?



Because in this case, we stuff the final HTML document with lots of unnecessary DOM nodes, which have no other purpose than just making our components &#8220;renderable.&#8221;



And that leads to a bigger-in-size and more complex document.



So the smart guys behind the library came up with the solution of using fragments instead of divs. And fragments don&#8217;t get included in the DOM.



Here is a code snippet without a fragment:




<div class="bu-code"><pre class="language-javascript"><code>import React, { Fragment } from &#039;react&#039;;

export default function Section({ children, note }) { 
 return (
 &lt;div className=&quot;call-to-action&quot;&gt; 
 {note &amp;&amp; &lt;Alert message={note} /&gt;} 
 {children}

 &lt;/div&gt;) 
}</code></pre></div>



And here is a code snippet with a fragment




<div class="bu-code"><pre class="language-javascript"><code>import React, { Fragment } from &#039;react&#039;;

export default function Section({ children, key, note }) { 
 return (
 &lt;Fragment key={key} &gt; 
 {note &amp;&amp; &lt;Alert message={note} /&gt;} 
 {children}

 &lt;/Fragment&gt;)
}</code></pre></div>



We also have the option to use the shorthand version of React.Fragment &#8211; the so-called &#8220;empty tag&#8221;:




<div class="bu-code"><pre class="language-javascript"><code>import React from &#039;react&#039;;

export default function Layout({ children }) { 
 return (
 &lt;&gt;
 &lt;Navigation /&gt;
 {children}
 &lt;/&gt;)
}</code></pre></div>



So we have three options, but which is the right one?



<h2 class="wp-block-heading">When To Use Div VS React.Fragment VS Empty Tag</h2>



Case 1: You need to apply CSS styles or assign event handlers to the group of elements



Suppose the group of elements you&#8217;re wrapping needs to be responsive to user interaction, or it must be styled. In that case, you must definitely use a div because fragments can&#8217;t have properties with a tiny exception that we&#8217;ll discuss in a minute.



Case 2: You will create the react component in a loop



In this case, you must use &lt;React.Fragment&gt; because it can take a &#8220;key&#8221; property, and as you may know, every element must be assigned a key when it&#8217;s created through iteration.



Case 3. You want to wrap a bunch of elements quickly



You don&#8217;t have to think in advance about how you will use the new component you&#8217;re making. If you need to assign it a key at some point, you can easily refactor the component in a few seconds.



If later you need to style it in some way or assign event handlers, then it&#8217;s easy to replace the fragment with a div.



So don&#8217;t overthink it&#8230;



Be Happy,



Sashe



P.S. Are you a hard-core fan of JavaScript and React? Then I suggest you check out <a data-internal-link="true" href="https://buhalbu.com">my JavaScript newsletter</a>. You will find discussions on more advanced topics related to web development with these technologies.

React Fragment vs Div: Which One To Use

Dear JavaScript Aficionado,



The error with the message &#8220;forEach is not a function&#8221; is a nasty one that has an easy explanation but can be challenging to debug.



Basically, the problem is that the variable or the constant on which you seek to invoke the method &#8220;forEach&#8221; isn&#8217;t an array. And because only objects that are arrays have this method, you get an error.



The naive solution is to check whether the variable is an array and if it&#8217;s not, then skip calling forEach. It could be something like this:




<div class="bu-code"><pre class="language-javascript"><code>const data = [[&quot;apple&quot;, &quot;orange&quot;, &quot;grape&quot;]];

//Preferred way to check whether it&#039;s array 
if (Array.isArray(data)) {
 data.forEach(el =&gt; console.log(el));
}

//Not-so-preferred way
if (data instanceof Array) {
 data.forEach(el =&gt; console.log(el));
}</code></pre></div>



Note: Why &#8220;Array.isArray()&#8221; and not &#8220;instanceof&#8221;? Read: <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/isArray" target="_blank" rel="noreferrer noopener">developer.mozilla.org </a> But that&#8217;s only sometimes the proper way to handle the bug&#8230;



You first need an answer to the question:



Why it&#8217;s not an array in the first place?



If the variable or the constant in question is always meant to be an array, then you must find out why it is not in this specific case.



There are many possibilities:



<ul>
<li>There can be another bug earlier in the code;</li>



<li>There can be wrong, not validated data;</li>



<li>There can be a new data format that wasn&#8217;t considered initially;</li>



<li>It may be that the variable or the constant isn&#8217;t meant to be an array at all;</li>



<li>It can be the wrong variable or constant;</li>



<li>It can be a misspelled variable or a constant name;</li>



<li>It can be a &#8220;variable scope&#8221; issue;</li>
</ul>



Perhaps those are the most common reasons why the code throws &#8220;forEach Is Not A Function.&#8221;



Some of those possibilities are super easy to be fixed, and others, like the appearance of a new data format, will lead to more substantial changes in the &#8220;business logic.&#8221;&nbsp;



Hence, you need to know why you make the change and how exactly it should handle the new case.



Be Happy,



Sashe



P.S. If you would like to read about more advanced tips, techniques, and strategies, check out this link (I think you&#8217;ll like what&#8217;s on the other side)

How To Debug Error &#8220;forEach Is Not A Function&#8221;

Dear JavaScript Aficionado,



If I must answer you quickly how to use the &#8220;continue&#8221; directive in a forEach method, then the short answer is: You can&#8217;t, and you don&#8217;t need to do it.



Why?



Because the forEach method of an array isn&#8217;t considered a traditional loop, so &#8220;continue&#8221; and &#8220;break&#8221; don&#8217;t affect its execution.



In case you need to skip the execution of some code when specific criteria are met, then you must use &#8220;return&#8221; like this:




<div class="bu-code"><pre class="language-javascript"><code>const arr = [[1, 2, 3, 4, 5, 6, 7]];

//Correct 
arr.forEach((element, index) =&gt; {
 if (index === 3) {
 return;
 }

 //Some code that will be skipped for element with index 3
 process(element);
});

//Wrong
arr.forEach((element, index) =&gt; {
 if (index === 3) {
 continue; //Won&#039;t do anything;
 }

 //This won&#039;t be skipped
 process(element);
});

//Wrong
arr.forEach((element, index) =&gt; {
 if (index === 3) {
 break; //Won&#039;t do anything;
 }

 //This won&#039;t be skipped
 process(element);
});</code></pre></div>



Because forEach is a method (a function that belongs to an object) that invokes a callback, the latter can be interrupted by returning a value (in our example, it&#8217;s &#8220;undefined&#8221;).



Many people get confused about this because they focus on the word &#8220;for&#8221; in the method&#8217;s name and somehow overlook the word &#8220;each.&#8221; By focusing on the former, they quickly associate it with the well-known &#8220;for&#8221; loop.



But if we include the word &#8220;each,&#8221; it becomes pretty clear what it does &#8211; it ALWAYS iterates over every element of an array. Even if you use &#8220;return&#8221; to skip some code execution in the callback function, the array element still needs to be visited.



So if you deal with big arrays and you have to think about optimizing stuff like the &#8220;time complexity&#8221; of your code, then you will need to use a traditional &#8220;for-of&#8221; loop because it will allow you to &#8220;continue&#8221; and/or &#8220;break&#8221; and thus &#8211; don&#8217;t visit elements unnecessary.



I hope this short discussion was helpful to you!



Be Happy,



Sashe



P.S. If you would like to read and discover more advanced tips, techniques, and strategies, <a data-internal-link="true" href="https://buhalbu.com">check out this link</a> (I think you&#8217;ll like what&#8217;s on the other side).

How To Use &#8220;continue&#8221; In A JavaScript forEach Callback

Next Js Dynamic Import: The Definitive Guide on How to Use It for Better App Performance

Dear WordPress Aficionado,



You can put a bag of money in my hands, and I will do my best to give you what you&#8217;re paying for, but you must have clear expectations of what&#8217;s possible and what&#8217;s not.



It&#8217;s in your best interest…



There are bad people out there who will take every single dollar you&#8217;re ready to pay for a faster and more usable website, so bear in mind the following important stuff:



<h2 class="wp-block-heading">Step 1. Demand perfect scores</h2>



If you want each of your web pages to score 100 points on every test, you must be prepared to spend big on custom development and hosting solutions. Still, the results won&#8217;t be guaranteed even then because there are many environmental factors you can&#8217;t control as well as technological limits.



The software engineers of Google give us a perfectly acceptable score range (80 &#8211; 99 points), so there&#8217;s no reason for us to be perfectionists.



<h2 class="wp-block-heading">Step 2. Don&#8217;t prioritize content creation</h2>



As long as your website runs smoothly without any errors, it&#8217;s ready to be used as a home base for your content marketing efforts.



People indeed like faster websites, but they like any useful content and hot offers even more. The latter is so important that they are eager to &#8220;forgive you&#8221; some technical issues if you deliver them great value.



On the other hand, a perfectly optimized website with no quality content and offers is totally useless.



<h2 class="wp-block-heading">Step 3. Stuff your WordPress with lots of plugins</h2>



One of the good things about using WordPress is that there are a lot of plugins. And one of the bad things about using it is that there are a lot of plugins.



if you make a mistake installing too many of them, your website wins membership in the club &#8220;Slow &amp; Buggy.&#8221; Moreover, you&#8217;re always one lousy plugin away from some disasters, like finding adult advertising all over your place.



So the first and most important thing when it comes to WordPress performance is the number and the quality of your plugins.



You must always think hard about do you really need yet another one and if that&#8217;s the case, you must choose very carefully. That includes deep research on the pros and cons of each available option.



Cheers,



Sashe Vuchkov The Code &amp; Marketing Combinator

How To Lose a Lot Of Money on Technical SEO For Your Blog

Dear WordPress Aficionado,



If you want your WordPress site to be faster, there are many “optimizations” you can apply to achieve that goal.



Here are some that will have a big impact: 



<h2 class="wp-block-heading">1. Install a caching plugin </h2>



Every time a user opens a page on your site, your WordPress generates an HTML document. If you use a <a data-internal-link="true" href="https://buhalbu.com/stream/lets-wave-a-magic-wand-and-give-your-wordpress-site-more-speed">caching plugin</a>, that document gets saved and reused for a certain period.



Caching plugins are indispensable helpers, and often they cost you nothing to use them.



Of course, later, you can decide your WordPress website needs more advanced caching features and thus purchase a premium version. That&#8217;s how the creators of the plugins make money and support themselves.



<h2 class="wp-block-heading">2. Set up a CDN service</h2>



Using a CDN service can speed up your website and lower your hosting expenses because it fetches the content of your website and then serves it from locations closer to the users.



Some<a data-internal-link="true" href="https://buhalbu.com/stream/the-awful-leisure-activity-of-evaluating-cdn-vendors-for-your-wordpress-site"> CDN providers</a> offer free plans, and others offer only paid plans.



My strategic approach is to use a free CDN when I create a website, and later, if the site&#8217;s web traffic takes off, I purchase a better plan with lots of other performance and security features.



<h2 class="wp-block-heading">3. Optimize your images</h2>



According to HTTP Archive, images make up more than 60% of the data loaded on web pages, so their file size significantly impacts the page loading speed. If you want to have a faster website &#8211; use smaller in size images.



Many WordPress plugins can be used for image optimization. Some CDN services offer automatic image optimization too, but mostly with their paid plans.



In the early stages of my website, I optimize my images manually with the help of Photoshop. It&#8217;s a paid software, but I have it installed because I use it to create logos, icons, backgrounds, and graphics for social media.



<h2 class="wp-block-heading">Conclusion</h2>



In the future, I will share with you many more tips on optimizing your WordPress site for better loading speed and usability. I start with these three tips because they can make a big difference for your site.



Cheers,



Sashe Vuchkov The Code &amp; Marketing Combinator

Tips & Tricks

Latest

Recent Posts