🙅 Never copy/paste when you’re learning React (or any other library/language)

Kyle Hoskins — Sun, 28 Nov 2021 17:48:43 +0000

Learning a new language or library and thinking about copying and pasting that Stack Overflow chunk of code, tutorial example, or "Getting Started" code block?

Think again!

Why not? Let's examine...

The Benefits of "typing it out"

Taking the extra time to type something out rather than copying and pasting it gives you several advantages:

🧠 Memory

The learning period is the most important phase to take the extra time to ensure you're getting in actual practice.

Take a breath, take it slow, and you will be thankful that you actually remember the syntax later. (... and don't worry, your code typing speed will become much faster! 🚀)

🧑‍💻 Interviews

Ctrl+C, Ctrl+P can be a good tool for speed in some cases, but it won't help much when you're expected to quickly code for yourself in a fast-paced, high pressure situation.

Would you copy/paste or type-out the following basics?

npm install --save-dev @testing-library/react
// It's beneficial to know terminal basics 
// like npm, git, etc

test('loads and displays greeting', () => {
  render(<Fetch url="/greeting" />)
  expect(screen.getByText('Load Greeting')).toBeInTheDocument()
})
// Without looking, can you write a complete test spec 
// file from scratch?

import React, { useState } from 'react';
import IconButton from '@mui/material/IconButton';
import SplitRow from 'components/layout/SplitRow';
// Manually typing imports helps understand and remember
// libraries and project structure

♻️ Refactoring/Reuse

Sometimes the ease of copy/paste prevents us from realizing what should be refactored into its own method or component.

You'll quickly become annoyed by typing repetitive code and start enjoying creating re-usable blocks as you code rather than coming back to it later.

✅ Code Quality

When you're writing a new file/code block, it's tempting to copy/paste similar code from somewhere else in your project and make small adjustments.

However, hastily copy/paste/adjusting may leave you with a "hack" or other issues like sub-optimal naming conventions. Additionally, you may have already learned a better way to accomplish the task than in your previous code.

I hope you'll enjoy copying/pasting less and coding more!

P.S. Sometime's screen real estate is an issue, so I use a learning hack of copying and pasting into my file, typing out the same code above the pasted block, then deleting the pasted code

How Next.js 12 improved Material-UI app compile by 8X

Kyle Hoskins — Thu, 28 Oct 2021 23:53:38 +0000

Some are calling Next.js 12 the "biggest step forward yet." Especially Rust fans.

Next.js 12's new Rust compiler features ~3x faster refresh locally and ~5x faster builds, but that's not the feature that helped me.

The unsung hero of the release for me was...

Compiled module count!

Next.js now outputs Fast Refresh timing in the console for both client and server compilation, including the number of modules and files compiled.

10,000 Modules * faint *

10,000 is great if we're talking about Outliers 📚, but downright scary 😱 when we're talking about modules.

My application uses Material-UI, but is pretty small, so what happened?!

Take a look:

import Menu from '@mui/icons-material/Menu';
import ChevronRight from '@mui/icons-material/ChevronRight';
import Save from '@mui/icons-material/Save';

versus:

import { Menu, ChevronRight, Save} from '@mui/icons-material';

The shorter one sure looks prettier, and VSCode even suggests importing from @mui/icons-material first, but don't fall for it!

How does it impact the compile time?

// importing from @mui/icons-material
event - compiled successfully in 5.1s (10013 modules)

// importing from @mui/icons-material/ChevronRight
event - compiled successfully in 615ms (1024 modules)

As a first time Next.js user, I did not have a project to compare against to recognize that my compile times were slow until the new module count logging feature.

If you use Material-UI, be sure to replace any instances of direct imports from @mui/material or @mui/icons-material as you will be compiling ALL the modules from the entire packages. Watch out for barrel files too!

With 1,000 modules remaining, I still have some improvements to make, but I figured I'd share for any others who may experience the same shock! How many modules does your Next.js application have?

P.S. Thanks for reading my first DEV article!

DEV Community: Kyle Hoskins