DEV Community: Shehzad Hussain

Don't Overlook These Key React Techniques to Optimize Your Apps

Shehzad Hussain — Wed, 30 Oct 2024 16:39:35 +0000

React offers various rendering techniques that can significantly enhance your app's performance. Today, we'll explore different strategies like client-side, server-side, static, and incremental static regeneration to help you understand when to use each.

Understanding these rendering techniques can improve your app's speed and user experience, which is crucial for keeping users engaged. Learning how to implement the right technique will save you headaches down the road.

Most developers fail to realize that not all rendering methods are equally effective. Misusing them can slow your app, cause redundant renders, or lead to over-engineered solutions.

React Rendering Techniques

Choosing the right rendering method depends on your app’s specific needs. While React makes it easy to manage UI, not mastering these techniques can negatively impact performance. Let's break down the main approaches:

1. Client-Side Rendering (CSR)

CSR is the most common approach in React apps, where the entire app is rendered in the browser. When the user visits the site, an empty HTML is loaded first, and React renders the app dynamically on the client side.

Pros: Fast initial deployment easier to build.
Cons: Slower initial page load especially for large apps.

2. Server-Side Rendering (SSR)

In SSR, React components are rendered on the server and sent as HTML to the client. This improves SEO performance and ensures faster initial page loads.

Pros: Better for SEO faster initial load.

Cons: It is more complex to set up slower overall interactions post-load.

3. Static Site Generation (SSG)

With SSG, React pages are pre-rendered at build time. This method is ideal for content that doesn’t change often.

Pros: Blazing-fast performance, lower server costs.

Cons: Not suitable for dynamic content that frequently changes.

4. Incremental Static Regeneration (ISR)

ISR allows you to update static pages after the build time by re-rendering them on demand, without rebuilding the entire site.

Pros: Combines the speed of SSG with the flexibility of dynamic data.

Cons: Slightly more complex configuration.

Key Takeaways

React has different rendering techniques: Client-Side Rendering (CSR), Server-Side Rendering (SSR), Static Site Generation (SSG), and Incremental Static Regeneration (ISR).

Knowing when and why to use each technique is critical for improving performance.

Mixing techniques within the same app is possible for an optimal solution.

Conclusion

Mastering the rendering techniques will make you a more efficient React developer. Using the right one is critical for building fast, scalable, and engaging applications.

Experiment with different rendering techniques to find what best suits your app's needs!

See you next Post!

Keep up the great work! :)

Save Hours of Coding: Build Powerful Custom Hooks in React

Shehzad Hussain — Sat, 26 Oct 2024 16:54:18 +0000

Today, we’ll see how to create custom React hooks to simplify your components and reuse logic.

Reusable logic is key to maintaining clean, DRY (Don’t Repeat Yourself) React code. Building custom hooks helps reduce complexity and improve code readability making it easier to manage your React apps.

Most developers repeat logic across multiple components or bloat their components with too much responsibility. This leads to harder-to-maintain code and increases the chances of bugs.

Why Custom Hooks Matter in React

Custom hooks allow you to extract stateful logic from components, making it easier to reuse across your application. With custom hooks your code becomes more modular, clean, and easier to test.

Here’s why you should consider creating custom hooks:

Simplifies testing by isolating logic.

Improves maintainability and readability.

Keeps components lean by abstracting logic.

Enhances code reuse without duplicating logic across components.

Creating a Simple Custom Hook

Let’s create a custom hook that handles the logic for form inputs, a common use case where you must manage input values and handle changes across multiple form fields.

This useFormInput hook encapsulates the logic of managing input state and updates. You can now use this hook to manage any form field in your components.

How to Use Custom Hooks in Components

Here’s how you can use the useFormInput hook in a form component:

In this example, the name and email inputs are managed with the useFormInput hook, which keeps the form logic simple.

More Examples of Custom Hooks

Let’s take another scenario: creating a useToggle hook that handles boolean states. This can be useful for toggling a modal or a dropdown menu.

Here’s how you can use useToggle in a component:

In this example, the useToggle hook manages whether the modal is open or closed, keeping the logic separated and reusable across other components.

Conclusion

Building custom hooks is a powerful way to abstract and reuse logic in React applications. They help keep your components lean, promote code reuse, and make your application easier to manage. By identifying repetitive logic, you can encapsulate it into reusable hooks, keeping your codebase clean.

See you next Post!

Keep up the great work! :)

🌐 Strengthen Your React App Testing: RTL Queries

Shehzad Hussain — Wed, 26 Jun 2024 09:01:41 +0000

Today, we'll see the essentials of using React Testing Library (RTL) queries, providing code examples to enhance your testing skills.

Understanding RTL queries is crucial for writing effective, maintainable tests for your React components, ensuring they behave as expected in various scenarios.

Many developers struggle with RTL queries due to the variety of options and the nuances in selecting the most appropriate query for different situations.

The Importance of RTL Queries

React Testing Library queries are designed to help you interact with your components in a way that closely resembles how users would.

This approach improves test reliability and readability. Let's dive into some key queries and their applications.

Different queries serve different purposes. Here’s a quick breakdown:

-** getBy**

queryBy
findBy

getBy

Returns the first matching node for a query. It throws an error if no elements match.

getBy queries are perfect for asserting that an element is present.

queryBy

Returns the first matching node for a query, but returns null if no elements match.

*queryBy queries help when asserting that an element is not present.
*

findBy

Returns a promise which resolves when an element is found, or rejects if no element is found after a timeout.

*findBy queries are useful for asynchronous elements that may not be immediately available in the DOM.
*

getAllBy, queryAllBy, and findAllBy

In addition to the individual queries, React Testing Library provides variants that return multiple elements.

*These variants are useful when you need to interact with or assert the presence of multiple elements matching the same criteria.
*

Using getAllBy

The getAllBy query returns an array of all matching nodes. If no elements match, it throws an error.

Using queryAllBy

The queryAllBy query also returns an array of all matching nodes but an empty array if no elements match instead of throwing an error.

Using findAllBy

The findAllBy query returns a promise that resolves to an array of all matching nodes. If no elements match, the promise is rejected.

Takeaways

Choose the different queries based on the context.

Use getBy to assert that an element is present.
*Use queryBy to assert that an element is not present.
*
Use findBy for elements that may appear after some delay.
Use getByAll, queryByAll, and findByAll for handling scenarios involving multiple elements.

For more detailed information, check out the RTL Cheatsheet and Queries documentation.

Conclusion

*Mastering React Testing Library queries is a crucial step in writing robust and maintainable tests for your React applications.
*
By choosing the appropriate query and understanding their use cases, you can write tests that are both reliable and easy to understand.

Please, comment on your thoughts. Your thoughts are valuable to contribute to the front-end development field. All are welcome! I want to hear them.

Keep up the good work! :)

🌐 Speed Up Your React Apps With Code Splitting

Shehzad Hussain — Sat, 08 Jun 2024 16:38:42 +0000

Today, we're going to explore how to speed up your React apps with code splitting. This will help improve your app's performance.

Code splitting is crucial. It reduces the initial load time of your application.

Many developers fail because they complicate the setup. In this article, we will explore a simple approach.

What is Code Splitting in Routing?

**
Code splitting in routing is a powerful technique to optimize your React applications.

It's breaking down your app’s routes into smaller chunks and loading them only when required.

Your initial bundle size is smaller. You improve the performance of your application.

Using lazy, Suspense, and react-router-dom

You can handle dynamic imports with lazy and Suspense. Using react-router-dom, you manage routing in your React application.

lazy and Suspense

lazy lets you dynamically import a component.

Suspense allows you to show a fallback UI while the component is being loaded.

react-router-dom

react-router-dom is a library for routing in React. It enables navigation between different components in a React application.

Step-by-Step Example

**
Install React Router DOM (if you haven't already):

Create Route Components:

Create files for your route or page components, e.g., home.js and about.js:

You have to import by default the components. Code splitting will work properly that way.

Update the App Component:

Modify app.js to use lazy, Suspense, and react-router-dom:

When you access the Home page, you only load the code of the Home page. The same way, when you access the About page.

If you have big pages, you will speed up the initial load of your app. You will only be loading the JavaScript of the initial page. You will only load the JavaScript of the other pages when you access them.

Conclusion

**
Code splitting is an efficient way to optimize your application's performance.

By dynamically loading route components, you can ensure faster initial load times.

By mastering code splitting in React, you provide a better user experience.

If you are building a big React app with multiple routes, implement this technique now! Your app will level up to the next level.

Front-End Development Challenges

Shehzad Hussain — Thu, 06 Jun 2024 11:23:49 +0000

Today, we'll explore the complexities of front-end development, from responsive designs to cross-browser compatibility, and talk about strategies for overcoming obstacles.

Mastering front-end development is essential for creating engaging and functional web applications that provide a seamless user experience across various devices and browsers.

Many developers struggle with front-end development due to its multifaceted nature and the need for precision in coding and design. Common hurdles include lack of consistency, performance issues, and difficulty implementing features.

Despite its challenges, front-end development offers immense opportunities for creativity and innovation in shaping the digital landscape.

Front-end development requires technical expertise, creativity, and attention to detail. Building responsive designs, ensuring cross-browser compatibility, and optimizing performance demand rigorous discipline and continuous learning.

Understand the challenges of front-end development, including responsive design and cross-browser compatibility.

Embrace the complexity as an opportunity for growth and innovation.

Develop strong discipline and consistency in coding practices.

Prioritize performance optimization for enhanced user experience.

Common challenges in front-end development

Responsive Design: Utilize CSS media queries and flexible layouts to create designs that adapt to various screen sizes.

Cross-Browser Compatibility: Test your code across browsers and devices to ensure consistent rendering and functionality.

Performance Optimization: Minimize file sizes, reduce HTTP requests, and utilize techniques like lazy loading to improve page load times.

Feature Implementation: Break down complex features into smaller tasks and leverage frameworks like React or Vue.js for efficient development.

Conclusion

While front-end development presents challenges, it's a rewarding journey that offers opportunities for growth and innovation. By cultivating strong discipline, consistency, and a belief in yourself, you can overcome obstacles and master the art of front-end development. Trust in your abilities, and keep pushing forward towards your goals.

Front-end development is hard. It's the truth. However, I am 100% sure that with a strong discipline and consistency over time...

You will master it.

Trust in yourself.

I hope you enjoyed the article.

If you have any questions, feel free to reply to the email or leave a comment in the post.

See you in the next post.

Have a great day!

🌐 Why is front-end development so complicated?

Shehzad Hussain — Sat, 01 Jun 2024 12:55:14 +0000

Is front-end development too complex? Today, we'll talk about it.

The goal is to help you understand today's front-end development.

Front-end development is important for any developer. It affects how well web apps work.

Many developers find modern front-end frameworks hard to use. This is because technologies change quickly, and web apps need to be:

fast
interactive
easy to maintain

Front-end development has become more complex over the years.

Front-end development has changed a lot since the days of jQuery. New frameworks like Angular, React, and Vue have introduced new challenges:

State Management: The web is stateless, so we need strong solutions to manage the state. Angular and React tried to solve these issues but brought their problems.
Dependencies: Many dependencies and tools make project setup harder. While useful, they need regular maintenance. Abandoned packages can also cause issues.
SEO and Performance: Modern frameworks must have good SEO and fast loading times.
Web evolution: Web apps now aim to be as engaging as mobile apps, driving complexity.
Complex Modern frameworks: There are many frameworks available to use.

State Management Evolution

In the past, managing state in web apps was simple but limited. As apps got more complex, we needed better state management. Angular offered a complete solution but it was heavy and complex.React provided a simpler, component-based approach.

This example shows how React’s useState hook makes state management easy.

The Dependency Dilemma

Modern front-end projects have many dependencies. They bring great features but you need to manage and update them often. Tools like Webpack and Babel add complexity but are essential.

Managing dependencies is simple. But, you have to keep an eye on updates and compatibility.

Where to start in front-end development?

First, master the fundamentals and then...

I strongly recommend React. It's one of the best and most popular front-end frameworks.
React is a safe bet!

React Developer Roadmap in 6 Simple Steps

HTML, CSS, and JavaScript fundamentals
Git version control system
React fundamentals
State management
API interaction
Testing

Conclusion

Front-end development is more complex now. It's the truth. Yet, this complexity meets the needs of modern web apps.

Mastering current tools is key to building strong, high-performing web apps.

Stay willing to learn, improve, and build awesome apps!

Please, comment on your thoughts. Your thoughts are valuable to contribute to the front-end development field. All are welcome! I want to hear them.

Keep up the good work! :)

Uncontrolled vs Controlled React Components

Shehzad Hussain — Tue, 28 May 2024 07:00:00 +0000

Today, we'll explore the nuanced differences between uncontrolled and controlled components in React.

Grasping these concepts is crucial for any React developer. It enhances your ability to create robust, user-friendly interfaces and ensures seamless state management across your apps.

Many developers struggle with these concepts, leading to inefficient code and unpredictable UI behavior. Understanding their proper use is key to avoiding these pitfalls.

Mastering uncontrolled and controlled components is a pivotal step in becoming an adept React developer, as it directly impacts the performance and reliability of your apps.

Uncontrolled Components: These components store their state internally and update it based on user input. They are similar to traditional HTML form elements.
Controlled Components: Contrastingly, controlled components do not maintain their state. They receive their current value as a prop from their parent component and a callback function to update the value.

Bulleted List of Takeaways

Uncontrolled components offer a simpler approach for implementing form inputs but less control over their state.
Controlled components provide more predictability and align with React's philosophy of stateful DOM management.
Understanding when to use each type leads to more efficient code and better performance.

Understanding Uncontrolled Components

Uncontrolled components are like traditional HTML form elements. They remember what you input without any additional code. Here's a simple example:

Understanding Controlled Components

Controlled components, on the other hand, render forms elements whose values are controlled by React, as shown here:

Conclusion

Understanding and correctly implementing uncontrolled and controlled components in React is vital for developers creating intuitive and responsive user interfaces. While uncontrolled components provide a quick and easy solution for simple scenarios, controlled components offer a higher level of control and integration with React's state management, leading to more predictable and manageable code. The choice between them should be guided by the specific needs of your project and your desired level of control over the component's state.

I hope you enjoyed the article.

See you in the next post.

Have a great day!

KISS: Keep It Simple, Stupid

Shehzad Hussain — Sat, 25 May 2024 18:06:15 +0000

Today, we're going to talk about *the KISS principle in JavaScript. *

It's all about simplifying your JavaScript code. You:

reduce bugs

enhance readability

improve maintainability

You will save time and effort in the long run.

Many devs struggle with overly complex code, leading to confusion and errors. Embracing simplicity prevents these pitfalls and streamlines your development process.

Keep It Simple, Stupid = Simplicity = Smoother Development & Easier Maintenance

Keep the code easy to read and understand.

If you keep the code simple, you'll make it easier for all people to fix things when they go wrong.

Don’t make your code too smart.

Make it simple. You and your teammates will thank you in the future when maintaining the code or adding new features.

Here are some simple code examples to see how to apply this principle:

Arrow Functions

Short-Circuit Evaluation

Implicit Return

Default Parameters

Simple functions

Avoiding Complex Functions

Using Built-in Functions

Avoiding Old 'for' Loop

Destructuring

Spread Operator

Async/Await over Promises

Map, Filter, Reduce

Template Literals

Conclusion

Embracing the KISS principle in your JavaScript coding practices can significantly improve your productivity and code quality.**

By keeping it simple, you'll write better code and make y*our development process more enjoyable and efficient.*

So, next time you're tempted to overcomplicate things…

Remember: Keep It Simple!

Create a React project from scratch

Shehzad Hussain — Sat, 25 May 2024 08:07:24 +0000

I want to share the steps I do when I create a new React project from scratch.

First, I choose Next js as React framework because nowadays is the best practice recommended by React team in the new documentation released recently. Moreover, it is better than starting a new React project with Create React App because Next js provides you with many tools and features integrated out of the box, and it is the best approach if you want good SEO for your website.

We will cover the steps for creating a Next js project on the local machine and uploading the project to GitHub.

Steps

Placed in the folder where you want to create the project, execute the following command:

npx create-next-app@latest --typescript

I like adding 'typescript' in my projects because of better bug detection prematurely and self-code documentation.

I like to make a file named '.npmrc' in the root of the project with the following content:

save-exact=true

It helps install packages in the future with a specific version set in the package.json. Thanks to that, we control the versions we install on our project.

If you are using the src folder and you want to use Tailwind CSS for styles (per default with Next.js installation), you must put this on the 'tailwind.config.js' file for proper installation of Tailwind CSS:

content: ["./src/*/.{js,ts,jsx,tsx,mdx}"],

You can add the '.npmrc' file and 'tailwind.config.js' file with the modification to the git stage and do a git commit on the main branch to save these initial configurations.

Go to https://github.com/new. We log in to GitHub.

Fill the Repository name with the same word we have named the project in our local machine to keep consistency.

If you want to create a project without sharing the code online, mark the 'Private' option.

Click 'Create repository'

We come back to the project on the local machine and run the following command:

git remote add origin https://github.com/github_username/project_name

We execute this command to upload our main git branch to GitHub remote repository:

git push -u origin main

Following these steps, we get a React project initial setup ready to build excellent applications.

I hope you enjoyed the article.

Join my weekly newsletter, where I share articles to help you become a better front-end developer. You'll receive them directly to your inbox.

See you in the next post.

Have a great day!

5 Most Used Array Methods in Front-End Development

Shehzad Hussain — Fri, 24 May 2024 16:52:00 +0000

Today we will see the most important array methods when developing front-end software. They are the most used array methods in my experience.

It is important to be very clear about how they work to develop software quickly and efficiently in our day-to-day since we work a lot with arrays.

Most people need help understanding them, and they always have to go and recheck their operation and spend extra time on it.

5 top array methods

The 5 array methods we are going to talk about are:

**forEach

map

filter

find

slice**

Let's go!

forEach

It executes a provided function once for each array element.

map

It's the method most used when developing with React, as it renders lists of JSX elements.

This method creates a new array in which each element results from the function applied to each one.

filter

It creates a shallow copy of the array, filtered down to just the elements that pass the test implemented by the provided function.

find

It returns the first element in the array that satisfies the testing function.

slice

It returns a shallow copy of the array filtered down to just the elements selected from start to end (end not included), where start and end represent the index of items in that array.

Conclusion

We have already seen the 5 most used methods, and it is crucial to be clear and have skill and experience with them to develop more efficient software in our daily work.

I have chosen these 5 methods based on my experience. You can check out this website and search for each one to find more information about them:

https://developer.mozilla.org/

I hope you enjoyed the article.

See you in the next post.

Have a great day!

5 Clean Code Principles in JavaScript

Shehzad Hussain — Fri, 24 May 2024 12:32:15 +0000

Today, I am going to present 5 recommendations to produce clean code about variables in JavaScript.

They are principles endorsed by "Clean Code" book authors and adapted for JavaScript. Following them will make your code readable, reusable, and refactorable.

Many developers aren't committed to these principles, making a no-maintainable code.

Following these 5 JavaScript principles, you will make an excellent clean code.
Here they are:

Use searchable names
Avoid Mental Mapping
Use explanatory variables
Only add the necessary context
Use pronounceable and meaningful variable names

Use searchable names

Avoid Mental Mapping

Use explanatory variables

Only add the necessary context

Conclusion
As a front-end developer, you will produce much JavaScript code over time.

It is crucial to make clean code to achieve maintainable code. Taking these types of principles into account will make you level up as a developer.

Here, I share a helpful resource to make clean code in JavaScript.

I hope you enjoyed the article.

Recursion in JavaScript

Shehzad Hussain — Thu, 23 May 2024 10:38:27 +0000

Today, we'll talk about recursion in JavaScript, a powerful tool in your coding arsenal. You'll learn how to implement it through clear, practical examples.

Understanding recursion is crucial for JavaScript developers. It simplifies complex problems, improves readability, and is often a preferred solution in interviews and real-world coding challenges.

Many developers struggle with recursion due to its abstract concept and potential for errors like infinite loops. But, with the right approach, it can be learned effectively

**Recursion is not just a technique but a new way of thinking.

Recursion involves a function calling itself until it reaches a base condition. This approach is beneficial for tasks like traversing trees or solving algorithms that require backtracking, such as searching or sorting.

Here are 4 takeaways:

Recursion simplifies complex problems by breaking them into smaller, manageable parts.
It's essential to define a clear base case to prevent infinite loops.
Recursion can lead to more readable and elegant code than iterative solutions.
Understanding stack overflow and how JavaScript manages memory in recursive calls is crucial.

**Code Example: Factorial Calculation

**

**

**Common Pitfalls

Stack Overflow: In JavaScript, each recursive call adds a frame to the call stack. If your recursion is too deep (i.e., too many calls without reaching the base case), you can exhaust the stack memory, leading to a "stack overflow" error. This often happens if the base case is not correctly defined or the recursion is not converging towards it.
Lack of Base Case: The base case is what stops the recursion. Without a proper base case, your function will keep calling itself indefinitely, leading to infinite recursion and, eventually, a stack overflow error.
Large Memory Consumption: Each recursive call uses memory to maintain its execution context. Inefficient recursion, especially with many levels, can consume significant memory, leading to performance issues.

**Advanced Techniques: Tail Call Optimization (TCO)

**
In ES6 (ECMAScript 2015), JavaScript introduced a feature called "tail call optimization." This optimization allows certain recursive calls (tail calls) to be executed without adding a new stack frame. For a recursive call to be a tail call, it must be the last operation in the function. This optimization significantly reduces the risk of stack overflow and improves performance for deep recursive calls.

Here are 4 takeaways:

Tail Call Optimization is a feature that makes recursive functions more efficient.
Normally, whenever a function calls itself, it adds a new layer to the "call stack" (a pile of ongoing function calls). If this stack gets too big, it can cause problems like a "stack overflow."
In TCO, if a function's last action is calling itself (a "tail call"), JavaScript can optimize it. Instead of adding a new layer to the stack, it reuses the current one. This means you can have more recursive calls without the risk of stack overflow.
However, for TCO to work, the recursive call must be the last thing the function does.

Here's a more straightforward example of a recursive function using TCO:

In this sumRange function:

We're calculating the sum of numbers from 1 to n.
The function keeps calling itself, but its last operation is the recursive call (return sumRange(n - 1, total + n)).
Because this call is the last action, it's a tail call and can be optimized by JavaScript, allowing it to run more efficiently, especially for large values of n.

In summary, TCO in JavaScript allows you to write recursive functions that are more efficient and less likely to run into problems with large numbers of recursive calls.

Here's an example to illustrate TCO with the factorial function:

Understanding these pitfalls and techniques can significantly enhance your proficiency in writing efficient and safe recursive functions in JavaScript.

Conclusion
Recursion in JavaScript is a valuable skill that, once mastered, opens up new possibilities in coding. It encourages cleaner, more intuitive solutions and is a favorite in algorithmic challenges. Practising and understanding the theory behind recursion are key to mastering it.

I hope you enjoyed the article.

If you have any questions, feel free to reply to the email or leave a comment in the post.

See you in the next post.

Have a great day!