DEV Community: Shihab Haque

Advanced React Hooks Explained With Real World Code Examples: Part 1

Shihab Haque — Sat, 03 May 2025 04:49:22 +0000

Since the release of React 16.8 in 2019, building a reusable piece of UI (components) has become super easy. Thanks to the introduction of React Hooks. Now we don't write verbose class-based components anymore. Over the years, the React team has introduced a ton of built-in hooks that solve specific problems.

But most of the people only stick with just useState() and useEffect(). But there are a lot of hooks that can improve your understanding and ability to write efficient code. As an experienced developer of React, I have tried to explain each of the advanced & newly introduced hooks with proper real-world code examples. Let's build the best app together.

1. useActionState

Whenever you submit a form in React, you constantly juggle from to write the load of useStates and useEffects with fetch.
With the introduction of React Server components, the useActionState made the process much easier.

This hook requires two parameters. One is an action parameter, and the other is the initialState. It returns the updated state, formAction, and isPending status. let's break them down:

const [state, formAction, isPending] = useActionState(myServerAction, initialState);

Example:

Let's say you want to build a form that sends a post request about a value in the database. You prefer to use the latest React RSC-based architecture (or you may use NextJS). Your form will catch real-time errors and send data to the DB.
Here is the whole code example:

import { useActionState } from "react";

// A server action
// NOTE: prevState is required for the useActionState hook
async function sendName(prevState: any, formData: FormData) {
  const name = formData.get("name");
  if (!name) {
    return { error: "Name is required!" };
  }
  // Imagine saving to database here
  return saveTODatabase(name);
}

//component
export default function ContactForm() {
  const initialState = { error: "" };
  const [state, formAction, isPending] = useActionState(sendName, initialState);

  return (
    <form action={formAction}>
      <input name="name" placeholder="Enter your name" disabled={isPending} />
      <button type="submit" disabled={isPending}>
        {isPending ? "Sending..." : "Submit"}
      </button>
      <p className="text-red-600">{state.error && state.message}</p>
    </form>
  );
}

Let's break this down:

The useActionState() hook got two parameters
- A server action sendName() function that saves the name if the name input is typed.
- an initialState object that holds the error data.
The useActionState() hook returns
- The updated state that contains the updated error data.
- The formAction function is passed to the form to perform this action on submit.
- The isPending boolean to get to know the form's asynchronous status. These returned values together give flexibility to write efficient code and perform secure transactions through components and databases.

2. useFormStatus

Another useful hook to get the proper information about a form's status. This hook returns 4 key pieces of information about a form. These are,

pending (boolean).
method (form submission method i.e., POST, PUT)
data (the submitted form data)
action (The server action function)

// nested inside a form component
  const { data, action, method, pending } = useFormStatus();

NOTE: useFormStatus() must be used inside a component that is a direct or indirect child of a <form>

Example:

The pending is the key property of this hook. It checks the form asynchronous status. Moreover, it is sometimes used with useActionState() hook that I discussed earlier.

You want to build a form that gives a good-looking loading UI needs to get the submitted data to show the client

// Submit button using useFormStatus
function SubmitButton() {
  const { pending, data } = useFormStatus();

  return (
    <div className="mt-2">
      <button type="submit" disabled={pending}>
        {pending ? 'Submitting...' : 'Submit'}
      </button>
      {pending && (
        <div className="text-sm mt-1 text-gray-500">
          <p>Submitting email: <strong>{data?.get('email') as string}</strong></p>
        </div>
      )}
    </div>
  );
}

export default function AdvancedForm() {
  const [state, formAction, isPending] = useActionState(handleSubmit, { message: '' });

  return (
    <form action={formAction} method="POST" className="max-w-sm space-y-3">
      <input
        type="email"
        name="email"
        placeholder="Enter your email"
        disabled={isPending}
      />
      <SubmitButton />
      {state.message && <p className="text-green-600 mt-2">{state.message}</p>}
    </form>
  );
}

Check that the SubmitButton component is inside a form containing component. Now the useFormStatus() will work seamlessly accompanied by useActionState() of the parent component.

3. useDeferredValue

It is the hook related to the performance boost. It defers the update of a value, making the UI more responsive. This is handy when updating the state with big data, heavy rendering, or slow components. It can be analogous to debouncing to some people. But there are some changes between them.

 const deferredInput = useDeferredValue(input);

Example

You want to build a search component that filters through a huge amount of data, and whenever you search for something through the input, the big filtering comes as a bottleneck. It makes the UI unresponsive and makes the typing input slow.
One way to fix this is to use debouncing. But React has a built-in hook useDefferedValue() to solve this.

import { useDeferredValue, useState } from 'react';

// bigList is a huge list of data!
function SearchComponent({ bigList }) {
  const [input, setInput] = useState('');
  const deferredInput = useDeferredValue(input); // defer heavy filtering

  const filteredList = bigList.filter(item =>
    item.includes(deferredInput)
  );

  return (
    <div>
      <input
        value={input}
        onChange={(e) => setInput(e.target.value)}
        placeholder="Search..."
      />
      <ul>
        {filteredList.map((item, i) => <li key={i}>{item}</li>)}
      </ul>
    </div>
  );
}

Now you can see the UI is responsive, as the input gets deferred inside the filteredList function. It tells React that this deferred input has less priority than the real input. So the real input changes immediately.

4. useTransition

This is another performance hook and is often confused with the useDeferredValue hook. This hook provides a function that tells React that these codes are less prioritized tasks. In other words, this hook manages the state transitions of states that are non-urgent, like background updates or heavy sorting/filtering. This helps to make the UI responsive.

Example:

You want to create a search component that filters a large dataset based on the input value provided in an input field. The data comes from another source. Use the useTransition() hook to make the filtering non-urgent. This will make the input more responsive

import { useState, useTransition } from "react";
import { data } from "./data";

export default function SearchComponent() {
  const [items, setItems] = useState(data);
  const [input, setInput] = useState("");
  const [isPending, startTransition] = useTransition();

  function handleInput(e) {
    //this state change is most prioritized
    setInput(e.target.value);

    startTransition(() => {
      //this tasks are non-urgent
      const filtered = data.filter((item) => {
        return item.name.toLowerCase().includes(e.target.value);
      });
      setItems(filtered);
    });
  }

  return (
    <div>
      <input type="text" value={input} onChange={handleInput} name="" id="" />
      {isPending && <h1>Loading...</h1>}
      <ul>
        {items.map((item) => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
}

5. useDebugValue

This hook is not that much used. Just to let you know that this type of hook exists in React :). This hook is primarily used for custom hooks to help developers debug hook values. A state passed to this hook can be seen through the DevTools.

Example

Imagine you are building a chat app and currently building a custom hook that checks whether the user is online or offline.
To debug, you can use the useDebugValue hook to check the status through the devtools

function useOnlineStatus() {
  const [isOnline, setIsOnline] = useState(navigator.onLine);

  useDebugValue(isOnline ? "Online" : "Offline"); // 👈 helpful in DevTools
//...other code

return isOnline;
}

6. useOptimistic

A latest and one of the most important hooks is the useOptimistic() hook. This hook lets you optimistically update the UI; that is, this hook will immediately reflect the necessary UI change before the server confirms. It is especially useful for form submissions or actions that take time (like API calls).

// useOptimistic invoking
 const [optimisticComments, addOptimisticComment] = useOptimistic(
    comments,
    (prevComments, newComment) => [...prevComments, { ...newComment, optimistic: true }]
  );

// to call this we use
addOptimistic({comment:'A new comment added'})

useOptimistic(initialState, updater) returns a [state, update function]. When addOptimisticComment is called:

UI updates immediately using the updater function.
When the server responds, the real data gets updated in place of the optimistically updated data.

Example

You are building a dashboard for an e-commerce site. A huge amount of product data is in front of you, and you are implementing a delete function that will delete a certain product from the list of all products. Use the useOptimistic hook to reflect the data change immediately and then delete the data from the server.

const AllProducts = ({ products }: { products: Product[] }) => {
  const [optimisticProducts, setOptimisticProducts] = useOptimistic(
    products,
    (prevstate, val) => {
      return prevstate.filter((product) => product.id !== val);
    }
  );

  const deleteProduct = async (id: number) => {
    setOptimisticProducts(id);
    await removeProduct(id);
  };

  return (
    <div>
      {optimisticProducts.map((product) => {
        return (
          <div
            /// product details code...
              <button onclick={()=>deleteProduct(product.id)} className="px-3 py-2 bg-red-500 w-full hover:bg-red-600 cursor-pointer text-white rounded-md">
                Delete
              </button>
          </div>
        );
      })}
    </div>
  );
};

7. The use API

The use sounds like a hook, acts like a hook, but it is not a hook in React. The React documentation more specifically calls it an API.
There are some challenges while using React's hooks, such as,

Hooks cannot be used inside conditional statements or for loops.
Some hooks make the code more verbose.

function MessageComponent({ messagePromise }) {
  const message = use(messagePromise);
  const theme = use(ThemeContext);
  // ...

// similar to 
  const message = await messagePromise
  const theme = useContext(ThemeContext)

use() solves these issues. The use API returns the value that was read from the resource, like the resolved value of a Promise or context. For instance, you can use the load of useEffect and useState to fetch data, but the use makes it just two or three lines of code. Moreover, use works exactly the same work of useContext hook with more flexibility.

example

You are creating a component that shows all the user's data. Based on the client's preference, you also want to change the current page's theme.
Both can be done using the use API.

import { use } from 'react';
import { ThemeContext } from './context/themecontext'

// Simulate fetching user data
async function getUser() {
  const res = await fetch('https://jsonplaceholder.typicode.com/users/1');
  return res.json();
}

export default function UserPage() {
  // This will suspend rendering until the data is ready
  const user = use(getUser());
  const theme = use(ThemeContext)

  return (
    <div className={theme === 'dark' ? 'dark':'light'}>
      <h1>User Info</h1>
      <p><strong>Name:</strong> {user.name}</p>
      <p><strong>Email:</strong> {user.email}</p>
    </div>
  );
}

Conclusion

That's a wrap for part 1. I have covered some major and new hooks in this blog. Hooks are essential to create modern server components in React. I do plan to write more about some advanced hooks. Feel free to connect with me.
LinkedIn
Twitter

All the special files in NextJS

Shihab Haque — Wed, 23 Apr 2025 05:46:18 +0000

The new Next.js app router system gives a handy way to manage routing in an application. NextJS has some conventional or special files that serve some useful purposes. Let's deep dive into learning those files.

Just to mention that Next.js supports 2 types of extensions on files. One is tsx for TypeScript app builders, and another is for .js for vanilla JavaScript builders. In this blog, I will only mention the .tsx extension, but you can definitely use the .js extension if you don't want to use TypeScript.

page.tsx

This is the special file that tells the compiler that 'This file should render a route.' The folder name automatically becomes a route and the page.tsx file returns a React element that tells what to render on that particular route.

app/
  about/
    page.tsx   <-- This is the route for /about
  contact/
    page.tsx   <-- This is the route for /contact

Example Code:

// app/about/page.tsx

const About = () => {
  return (
    <div>About page</div>
  );
};

export default About;

layout.tsx

This special file plays a very powerful role. It defines the structure nested and shared across all the pages. layout.tsx gets all the pages through the children prop and displays them according to the route hit.

It is particularly useful as it gives layouts of the shared piece of UI and doesn't re-render on client-side route changes.

app/
  layout.tsx       <-- Root layout, wraps all pages
  about/
    page.tsx       <-- /about
    layout.tsx     <-- Layout specific to /about and its children
  contact/
    page.tsx       <-- /contact

Example Code:

// app/laout.tsx

import Footer from "../_ui/Footer";
import Header from "../_ui/Header";

const RootLayout = ({ children }: { children: React.ReactElement }) => {
  return (
    <>
      <Header />
      <main>{children}</main>
      <Footer />
    </>
  );
};

export default RootLayout;

loading.tsx

This file is seen when the page or layout (or data for them) is in pending state and coming from external sources. It is super useful for server components. No need to manually select the loading state and use useEffect to make the state change. One cool thing about this file is that all the nested folders can use this file to show a loading state.
NOTE: It is a client component. use the 'use client' directive
Just place this file inside the layout.tsx or page.tsx

Example Code:

// app/blog/loading.tsx

export default function Loading() {
  return <p>⏳ Loading blog post...</p>;
}

error.tsx

This file is useful to catch and display errors if an error is thrown in the layout or page. Similar to loading.tsx, it is also a client component.
This component receives two props, error and reset. The error prop is to get access to the error that occurred in the page or layout. The reset prop is a function that retries to the route.
one key thing to remember is that error.tsx file only catches the error in the nested pages and layouts. It cannot catch the errors of the same folder files (i.e. page.tsx & template.tsx)

app/
  error.tsx    <-- The main error-catching file
  layout.tsx   <-- cannot catch the error of this layout
  about/
    page.tsx   <-- can catch the error of this page

Example Code:

// app/blog/error.tsx

'use client'; 

const Error = ({ error, reset }: { error: Error; reset: () => void })=> {

  return (
    <div>
      <h2>😓 {error.message}</h2>
      <button onClick={reset}>Try again</button>
    </div>
  );
}

export default Error

not-found.tsx

It is pretty much self-explanatory. If a route is not found, this file will show a 404 response. Next.js has its own 404 not found display, but this file helps to customize that UI.
Also, the layout's structure will have an effect here.

Example Code:

// app/blog/not-found.tsx

const NotFound = () => {
  return <h1>🔍 Blog post not found!</h1>;
}

export default NotFound

template.tsx

template.tsx serves almost a similar functionality to layout.tsx. like layout.tsx, it wraps around page.tsx.
The main difference is that layout.tsx is persistent. which means it will not re-render on navigation. whereas the template.tsx re-renders on every navigation. This behavior can affect performance, but it's good for pages that look similar but should reset states on route change.

// app/dashboard/template.tsx

const DashboardTemplate = ({ children }: { children: React.ReactNode }) => {
  return (
    <div>
      <h1>Dashboard Template</h1>
      <div>{children}</div>
    </div>
  );
}

export default DashboardTemplate;

global-error.tsx

As I mentioned earlier, that error.tsx file can only catch the errors of nested folders' pages and layouts. Two questions arise from here,

How to catch the error of root layout and page?
What if the error is unexpected and the error.tsx cannot catch it?

The global-error.tsx helps answer these questions. It acts as a catch-all error boundary of the entire app. If any error bubbles up and is not caught by a route-level error.tsx, then global-error.tsx is shown. Moreover, the root level error is also shown by this file.

const GlobalError = ({ error, reset }: { error: Error; reset: () => void }) => {
  const router = useRouter();
  const reload = () => {
    startTransition(() => {
      router.refresh();
      reset();
    });
  };
   return (
    <html>
      <body>
        <div className="text-red-700">
          {error.message}
          <button onClick={reload}>Try again</button>
        </div>
      </body>
    </html>
  );
};

export default GlobalError;

NOTE: Must wrap in <html> and <body> (since this is app-wide). Global error boundaries works only on production mode.

route.ts

Next.js is a full-stack framework. The route.ts file is used to define custom API endpoints inside the /app directory. Just create this file and export a function in the exact name of an HTTP method (i.e. GET,POST). Supported HTTP methods are GET, POST, PATCH, DELETE, PUT, HEAD, OPTIONS, etc.

NOTE: Each function should be an exporting async function that returns a Response

Example Code:

// app/api/hello/route.ts

//for get request
export async function GET() {
  return new Response("Hello from Next.js API!");
}

//for post request
export async function POST(request: Request) {
  const data = await request.json();
  return Response.json({ message: "data sent!", yourData: data });
}

default.tsx

One of the cool feature of Next.js is the usage of parallel routes. these are the folders that have @ in the beginning. The pages of these folders can be accessed by the layouts through props. If a route is not active(not in the current URL path), then the default.tsx file works as a fallback UI.

app/
 └── layout.tsx
 └── @feed/
     └── default.tsx   <-- this renders when no route in @feed is active
 └── @modal/
     └── default.tsx   <-- fallback UI when no modal route is selected

Example Code:

// app/layout.tsx

//the feed and modal came from parallel routes @feed and @modal
export default function RootLayout({ children, feed, modal }: { 
  children: React.ReactNode;
  feed: React.ReactNode;
  modal: React.ReactNode;
}) {
  return (
    <>
      {children}
      <aside>{feed}</aside>
      <div>{modal}</div>
    </>
  );
}

middleware.ts

This is a file that returns a function named middleware() and this function intercepts incoming requests and runs code before rendering pages. It is useful for authentication, cookies, headers, redirects/rewrites etc.
always put this file in the root directory inside the /src folder subsequent to the /app folder.

Example Code:

import { NextRequest, NextResponse } from "next/server";

export function middleware(request: NextRequest) {
  //this middleware redirects to the v2 api endpoint
  if (request.nextUrl.pathname === "/v1/api") {
    return NextResponse.rewrite(new URL("/v2/api", request.url));
  }
  const response = NextResponse.next(); //to act as default response

  //working with cookies
  const themePreference = request.cookies.get("theme");

  if (!themePreference) {
    response.cookies.set("theme", "dark");
  }

  return response;
}

head.tsx

This special file is optional. It customizes the <head> section (like title, meta tags, etc.) for a specific route or layout. More precisely, it helps to create dynamic <head> content. It only affects the route it's inside.

Example Code:

app/about/head.tsx

export default function Head() {
  return (
    <>
      <title>About Us | Next APP</title>
      <meta name="description" content="Learn more about us." />
    </>
  );
}

Conclusion

Thank you for reading this blog. I hope this was helpful to you. These were just the fundamentals. Next.js provides a fantastic one place to go option for all web dev needs.
Did I miss anything? Write about it in the comments below.

Do you have anything to say about Webdev, Coding stuff? let's have a chat, connect with me on,
LinkedIn
Twitter

16 Essential JavaScript Best Practices for Smarter Coding

Shihab Haque — Sat, 15 Feb 2025 02:41:17 +0000

JavaScript is the language of the web. Nowadays, we often use frameworks and libraries for our day-to-day web application building, but still, it is quite effective to learn the best practices of JavaScript to write more effective and efficient code. Here I have discussed the top 20 best practices that I think are a must-know for all the web programmers.

1. Always declare variables outside of a loop.

If we declare a variable inside of our for loop, it will be assigned constantly until the for loop is finished. The performance of that code degrades as the application grows larger. This is not a good practice. It is an indication of uneven development.

///❌ Bad Practice
for(let i = 0;i<10000;i++){
    let myDiv=document.querySelector('.my-div');
    //other operations
};

///✅ Best Practice
cosnt myDiv=document.querySelector('.my-div');
const len = 10000
for(let i = 0;i<len;i++){
    //other operations
};

2. Try not to include multiple complex operations inside a single function.

One single function may contain several complex operations and execute them in a single runtime. But that is not a best practice, as sometimes the code becomes hard to comprehend and debug. Although it has nothing to do with performance, instead the code is much easier to read. It is also simple to debug, and other programmers can simply comprehend and modify our code. Developers love to call it "refactoring," as it is a part of refactoring.

///❌ Bad practice
function callThem(memberArr){
    memberArr.forEach(person=>{
        const isValid= allUserObj.find(person.name);
        if(isValid){
            call(person);
        };
    })
};

///✅ Best practice
function isValidMember(member){
    const isValid= allUserObj.find(member.name);
    return isValid;
};
function callThem(users){
    users.filter(isValidMember).forEach(call);
};

3. Use `let` and `const` instead of `var`

var is global scoped or function-scoped, meaning it is outside of the function in which it is declared. let and const are blocked-scoped. let and const prevent accidental modifications from outside of a scope.
in code we can see,

//var
function example() {
    if (true) {
        var x = 10;
    }
    console.log(x); // 10 (unexpected behavior, since x is accessible outside the block)
}
example();

//let or const
function example() {
    if (true) {
        let y = 20;
    }
    console.log(y); // ReferenceError: y is not defined
}
example();

Using let or const instead of var avoids hoisting issues and prevents unexpected behaviors from coming. In 2025, no one uses var. But knowing var is important to understand some fundamental JavaScript concepts like hoising and scoping.
Another key thing to remember is that we may get confused while choosing between const and let. So my suggestion is to use const always, and whenever you need to change the variable, then use let.

//❌ bad practice
var name = 'alice'
var name = 'bob' //you can do this

//✅ best practice
let name = 'alice'
name = 'bob'

const color = 'cyan'

4. Use one variable to define multiple values

Instead of declaring each variable with let or const, we can declare the variable key once and assign multiple variables separated by commas. Although commas are not mandatory. Editor adds commas by default while saving the file.

///❌ Bad
const container = document.querySelector('.container');
const navBar = document.querySelector('.nav-bar');
const myDiv = document.querySelector('.my-div');

///✅ Best
const container = document.querySelector('.container'),
    navBar = document.querySelector('.nav-bar'),
    myDiv = document.querySelector('.my-div');

5. Use Arrow functions

Using arrow functions (=>) in JavaScript is often a best practice. Using arrow function makes the code concise and readable, and it is ideal for callback functions like the expressJS code you write when your client hits a particular route.

//example:
let number= ()=>{
    return 10
};
console.log(number()); //10

//if function has only one statement
let number = ()=> 10; //(return omited for one line also you cannot write return)

// if has one parameter
let number = n => n;

NOTE: In some specific cases, using the arrow function is not recommended. for instance,

Arrow function doesn’t bother about this keyword. when we are using it as an object method, this does not refer to the object itself. for this using arrow functions is not recommended here.

const user = {
    name: "alice",
    greet: () => {
        console.log(`Hello, ${this.name}`); // `this` is the window object
    }
};

user.greet(); // Hello, undefined

Arrow functions cannot be used as constructors as it cannot be assigned with the new keyword.

const Person = (name) => {
    this.name = name;
};

const p = new Person("Sayma"); // TypeError: Person is not a constructor

6. Use spread operator

It is a common best practice to use spread operator (...) when working with arrays, objects and function arguments. Makes it easier to work with arrays and objects when copying or merging. Also, it replaces the methods like concat(), slice() and apply() that makes the code cleaner and more readable.

//❌ bad practice
const newNumbers = numbers;
newNumbers.push(4);
console.log(numbers); // [1, 2, 3, 4] (Oops! Original array changed)

//✅ best practice
const numbers = [1, 2, 3];
const newNumbers = [...numbers]; // Creates a copy
newNumbers.push(4);

console.log(numbers); // [1, 2, 3] (Original array remains unchanged)
console.log(newNumbers); // [1, 2, 3, 4]

//for objects
const user = { name: "Sayma", age: 20 };
const updatedUser = { ...user, age: 21, country: "Bangladesh" };

console.log(updatedUser); // { name: "Sayma", age: 21, country: "Bangladesh" }

7. Write meaningful comments

Comments are an essential part of writing readable, maintainable, and understandable code. Writing meaningful comments gives purpose to the code you are writing. However, There are some key things to know while writing comments like,

Use Comments to Explain “Why,” Not “What” The code should be clear enough to explain "what" and a comment whould explain the "why" of that code.

// ❌ Bad Comment: Redundant
const result = calculateTax(income);
// This function calculates the tax

// ✅ Good Comment: Explains the 'why'
const result = calculateTax(income);
// Calculate tax because the tax rate changes every year

8. Use Template Literals (`)

the key located below the Esc key of your keyboard is the template literal. Template literals are a modern and preferred way of working with strings in JavaScript. using them makes the code more readable, cleaner and maintainable. In fact, before this, multi-line strings were harder to

//❌ Error
console.log("I cannnot be written in
multiple line because I am not a template literal")

//✅ OK
console.log(`I can be written in
multiple line because I am inside template literal`)

//❌ Bad practice
let age = 11+1

let name= "alice"

console.log(name + " is now " + age + " years old.")

//✅ Best practice

let name = "alice"

console.log(`${name} is now ${11 + 1} years old`)

9. Use Strong type checking(===)

There are two types of operand type checking (== & ===) in JavaScript. The Double Equals(==) simply compares the values of two operands. Whereas The Tripple Equals(===) compares values and data types between two operands. It is highly recommended to use strong type Tripple Equal checking(===). In fact, In modern frameworks and libraries like React or Angular, we mostly(99%) use (===)

// example:
4 == "4" //true
4 === "4" //false

// Bad practice
let a = "600"

if (a == 600) {
    //reachable
}

// Best practice
if (a === 600) {
    // not reachable
}

Note: Use == if you are aware of what you are doing.

10. Don't pollute the global prototype

The prototype is an object that is associated with every function and object by default in JavaScript.

Making any changes to the prototype is called "Prototype Pollution.". Avoiding making any changes to the prototype is good practice. Some developers may think that they are cool with changing the prototype, but because of this, the expected behavior of javascript may get changed.

// Bad practice
String.prototype.changeString= () =>{
    // implementing a random function
}

// Best practice
class changeString extends String{
    newFunction(){
        //implementation
    }
}

let randomName = new changeString('some parameter')

11. Declare default parameter to function arguments

One of the cool ES6 features is the default parameter. This technique ensures that functions can handle cases where arguments may not be passed without causing errors or requiring extra logic to check if arguments exist.
If a function in JavaScript is called with missing arguments (less than declared), the missing values are set to undefined. Instead, we can assigne default values.

//❌ Bad practice / Old way
function drink(beverage) {
    beverage = beverage !== undefined ? beverage : "PEPSI";
    return beverage
}
console.log(drink()) //PEPSI

//✅ Best practice / ES6 way
function drink(beverage = "PEPSI") {
    return beverage
}

console.log(drink()) //PEPSI

12. Give a Meaningful variable and function name

This one is self-explanatory. Each variable and function should contain the purpose behind assigning it. Giving clean variable names though they are large is a good practice.

//❌ Bad practice
const list1 = ["bread", "butter", "jam"]
const list2 = ["monkey", "lion", "cow"]

function LoginPage(){
    //implement
}

//✅ Best Practice
const shoppingList = ["bread", "butter", "jam"]
const animalList = ["monkey", "lion", "cow"]

function totalLoginAttemptsInPage(){
    //implement
}

13. Know the falsy values

There are several values in JavaScript that are considered falsy. Knowing them will give an understanding about how the boolean formats of JavaScript work.
the falsy values are false, 0, "", null, undefined, NaN

if (!false && !0 && !null && !"" && !null && !undefined && !NaN) {
  console.log('these are falsy');
}

NOTE: In javascript empty objects({}) and empty arrays([]) are considered truthy

14. Quickly Assign Variable Values With Destructuring

It is also another a common best practice to follow. Destructuring is widely used with libraries like React. It makes writing the code smooth, clean and readable.

// Extracting
const colors = ['red', 'green', 'blue'];
const [firstColor, secondColor] = colors;

const person = { name: 'John', age: 25 };
const { name, age } = person;

console.log(firstColor);  // red
console.log(age); // 25

//function parameters
function greet({ name, age }) {
  console.log(`${name} is ${age} years old.`);
}
greet({ name: 'alice', age: 22 });

15. Use Async/Await

Using async/await is considered a best practice in modern JavaScript. In the places of asynchronous operations like API calls, reading files or promise resolve, this syntatic sugar code makes it look and behave more like synchronous code. It improves readability, Error handling becomes smoother and avoids "Callback Hell". It is also better for debugging.

// Without async/await
fetchData()
  .then(res => res.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

//✅ With async/await
async function getData() {
  try {
    const res = await fetchData();
    const data = await res.json();
    console.log(data);
  } catch (error) {
    console.error(error);
  }
}

16. avoid `eval()`

If you are new to JavaScript and don't know anything about eval(), It is best to avoid it altogether in any scenario.

Conclusion

I hope you find these tips helpful and you'll keep them in mind when you code in JavaScript. If you have any additional tips or best practices, feel free to share them in the comments. Let's keep learning and improving together!

My Socials:
LinkedIn
Twitter

My Honest Review of Harvard’s CS50x: Tips, Guidelines & Free Certificate

Shihab Haque — Fri, 30 Aug 2024 00:53:29 +0000

In May 2024, after 3 months of hard work, I finally completed the Harvard CS50X course. Finally, I finished the whole journey and got a free certificate from Harvard. It was one of the best courses I have ever taken. Here is my certificate,

As you are here, I can assume that you know something about CS50x. It is Harvard University’s Introduction to Programming course that teaches you the basics of the programming world. I see a lot of misconceptions out there that I had before starting. I will try to give a comprehensive overview and general guidelines to help you understand CS50x fully. In the end, you can get a free certificate from Harvard, just like me. Let’s start

Overview:

So what is CS50? Harvard says,

This is CS50, Harvard University’s introduction to the intellectual enterprises of computer science and the art of programming, for concentrators and non-concentrators alike, with or without prior programming experience.

The course consists of 11 weeks(parts) of learning materials and in each part, you are given a problem set that you need to complete by yourself without the help of AI or any other method. In the last 11th week, you have to submit a final project that you need to complete with your creativity.

One specialty of CS50 is its instructor David Malan, and the supportive CS50 team. You will fall in love with the teaching style of David Malan. His presentation and teaching were wonderful. I don’t have any complaints about the teachings of this course.

The 11weeks:

Below is a thorough overview of all the weeks. feel free to skip. How to ace these sections is given later in this blog

**Week 0 Scratch:
**in this section, You will learn some introductory concepts of computer science, such as Computational thinking, Problem-solving, Binary, ASCII, Uniconde, algorithms, etc.
David will show you some thinking about the fundamentals of programming through a baby language called Scratch. As a challenge, you have to submit your own Scratch Project. It is fun TBH.
**Week 1 C:
**You will write actual programs in this section. You will learn how to program in C. This includes fundamentals of a programming language such as conditionals, loops, variables, data types, basic terminal commands. Malan will dive into some deep concepts like integer overflow and truncation.
Here the Problems to complete are Mario, cash, and credit.
mario and cash are simple but credit is tricky.
**Week 2 Arrays:
**You will learn Processing and Compiling steps, debugging, and crucial programming concepts like Arrays and Strings. You will make two programs ‘greet.c’ and ‘touppercase’ in class
The problems are Scrabble and Readability. Note that Readability is tough. Also, You have to submit one of these projects,
Caesar(comparatively easy) and Substitution(difficult++).
Week 3 Algorithms:
In the class, you will be taught Asymptotic Notation to calculate algorithmic efficiency. The video shows the search operations and sorts like Linear search, binary search, bubble sort, merge sort, and selection sort. A beautiful concept of programming which is recursion is also shown here.
you are to complete Sort and Plurality compulsorily. the optional are Runoff and Tideman. you need to complete any one of the two. My advice is to complete Runoff as it is easier. Tideman is one of the hardest problems you will ever encounter in your life.
Week 4 Memory:
In this week, Malan teaches how memory works. Pointers, malloc, free, and basic memory execution like heap and stack are covered here. you will also learn about memory leaks, garbage values, and File I/O operations.
As problem, you have to submit Volume, Recover, and any one version of filters. I submitted both of the filter problems.
Week 5 Data Structures:
You will learn some Basics of Data Structures. concepts like Queues, Stacks, Heaps, Linked lists, Search Trees, Hash tables and Tries are covered here
The problems are Speller and Inheritance which are comparatively simpler than the previous ones. If you have made it this far, I am sure you have the capability to complete the whole journey.
Week 6 Python:
You will apply the previous programming language concepts but in a much easier language Python.
The problem sets are easy. In fact, you are actually rewriting your previous pset solutions in Python. Note that you may find the DNA problem a little bit tricky.
Week 6.5 Artificial Intelligence:
You will learn How the modern AI takes decisions and works behind them. Some basics of Prompt engineering, machine learning, deep learning and Generative AI are discussed here.
No problem sets here.
Week 7 SQL:
Let’s dive deep into the world of relational databases. You will be taught the basics of sqlite3 database and the concepts like tables, rows, indexes, functions, and injection attacks, etc.
If you have focused on the topics in the video then the problem set is too easy for you to solve. The problems are Songs, Movies and FiftyVille.
I just love the FiftyVille. I believe you will love it too.
Week 8 HTML, CSS and JavaScript:
The basic web concepts are discussed in the video such as how the internet works, TCP, IP, HTTP etc. Then you will learn the building blocks of a website which are HTML, CSS and JavaScript. You will only get a brief understanding of these technologies.
You have to submit the solutions of two problems which are Trivia and Homepage. you have to make custom websites using HTML, CSS and Javascript to solve this
Week 9 Flask:
Flask is a library built on top of Python to make a website dynamic. The video covers topics like Flask, Route, Requests, Responses, Sessions, Cookies and shows basic Jinja syntax.
You have to solve two problems Birthdays and Finance by making two dynamic websites using flask and jinja. The Finance is a difficult problem but fun.
Week 10 Cybersecurity:
The basics of Cybersecurity are covered in the video and this one doesn’t have any cybersecurity-related problems to complete. All you have to complete a final project to complete the whole course. You can take the help of AI over here but your project needs to be unique. To make the project you can choose whatever you want to make and whatever technologies you would like to choose.

Is CS50 for me?

Although Cs50 can benefit most people, there are certain things you should consider before starting. otherwise, you may feel disappointed or may not finish the course and waste time.

CS50 is definitely for you if,

**You have never coded before:
**Although a little bit of coding experience will save a lot of time, If you haven’t ever coded before, you should start with CS50. If you can complete it until the end, you can become unstoppable. Note that most beginners don’t finish the course because it seems too hard.
**You want to have a Comprehensive understanding of the Programming world:
**Whether You are an employee, a creative worker, or a college student, CS50 will help you build a good understanding of the programming world. You may find a way to go in your career. Just like me.
I was a frontend developer, mostly working on frontend and building good-looking UIs. After completing CS50, I started to move towards the backend.
you want to increase your problem-solving skills:
CS50 has a huge set of problems to solve. In each week, the problems get tougher and more interesting. I am sure if you want to increase your problem-solving skills along with learning the overview of the programming world CS50 is definitely a way to go.
Seeking a recognized Credential:
Getting Harvard’s certificate is a fantastic thing to achieve in your life. Think about it this way,
If you were HR and choosing to recruit two candidates in a single position, The one who had completed CS50 before will always come in a handy position in your list. Although other factors count as well.

CS50 is not for you if,

**You want to get an expert in a field:
**This is an important point. From my own experience, I can say that CS50x is not a course that makes you specialized in a certain field. be it web development, mobile, or backend development. It only gives you a basic overview of the tech world. You gain a vast knowledge of the programming world. then your task is to pick a field and learn more about it. CS50 has its own Python or Web courses as well. you can check them.
You want a job ASAP:
I want to give you this crucial message. As I said earlier CS50x is not a specialized course, that doesn’t make you an expert or gives you a thorough knowledge of a certain field. For this, Your knowledge is not that much complete. It is a common misconception that I find in the community. If you want a job As early as possible then look for some other complete courses or learning paths. CS50 has courses like Python, R, or Web. you can check them. but without an exception getting a job with only CS50x is tough. You can DM me on Twitter so that I can help you with this.
NOTE: CS50’s certificate may help you to get shortlisted forthe interview
You Don’t Have Time to Commit:
When I was starting I thought I would finish this course Within 1month by working tremendously hard.
Keep in mind that CS50 is a hard course and this is a speciality of it. It requires time to complete. Sometimes you may have to rewatch the lectures to understand the concepts. At least 2 months of dedicated work is required to complete it. Ngl It took me 3 months to complete CS50. Time commitment is necessary.
Other factors:
You have a busy schedule or You are a programmer and don’t want to learn low-level language like C deeply.
Maybe you are already in a learning process of something and constantly something is in your mind that is calling about CS50. First complete the learning then you can come to CS50 anytime.

My guidelines:

As I already completed the course, I am giving you some tips and guidelines to complete the CS50. I wish I had known some of these tips earlier. I believe it will help you in the process.

We chose CS50 not because its easy, but because its hard.

Keep in mind: It’s not easy
One thing is to remind you if you are a beginner and have no prior knowledge in Programming, CS50 is a HARD course to complete. I was lucky that I had a background in learning JavaScript whose concepts helped me a lot. Things may eventually become difficult and you may get frustrated. But don’t worry it's not just you. We've all been there and we've overcome it.
**Complete the course from CS50’s own website
**You can complete the whole course from EDX for free but I think completing it from CS50’s website is much more straightforward. It’s absolutely your choice.
Challenge yourself
One of the reasons it took me 3 months to complete CS50x is that I have completed virtually all the psets including the optional ones. I threw a challenge to myself to complete all the problem tasks. This also enhanced my knowledge. I would suggest you at least give it a try to complete all the psets regardless of optional or required.
Take Notes:
You must take notes of each important topic covered in the lecture so that you may not get back to rewatch the whole video to understand the concept once again.
CS50 videos are somewhat complex. Sometimes you have to rewatch the video. If you take notes then you might not rewatch the video and just go through the notes only. this is helpful. I took notes on notion. If you want them then DM me on Twitter. I will share them with you.
Don’t skip Lloyed’s explanations:
After each week’s David’s lesson, to make you more understand the topics there are some extra videos given. Doug Lloyd is the presenter and he tries to give an overview about the topics with some examples. My suggestion is that don’t skip those.
Don’t get stuck into an optional problem:
It is necessary to complete the mandatory problem sets but some problems will kill a lot of time. especially the “more comfortable ones” . **This is one of the mistakes I have made. I was stuck for weeks to complete just a single problem. Don’t do that. Sometimes skipping I a wise option.
Here is a tip: don’t submit the optional ones that seem too tough. Just Google the solution and try to understand what was the mistake. and **note that: don’t submit that solution.
Tideman is tough!!
In Week 3’s Pset, you have to submit one of Runoff and Tideman. **Tideman is TOO TOUGH. I repeat TOO TOUGH.
**I was stubborn and tried and stuck for almost 17 days. This problem’s solution is done with recursion. Then I had to move on. If you feel that this is tough(obviously it is), just move on. complete the Runoff and move on. I wish someone had told me this before.
Take legal help from discord
CS50’s discord community is very helpful. just take help from the server if you are stuck or have some query. but note that you shouldn’t share your full solution. That’s illegal.
the link: CS50 Discord
Be honest
CS50 has an academic honesty policy. It is absolutely illegal to copy code from other sources and submit the solution as if it were written by yours. The CS50 team may disqualify your certificate for this.
Also, You are here to learn. Why be dishonest over here?
Final Project Submission Tips:
You should take time and submit the final project with love and creativity as if you are creating your own tech product. Think deeply about it and make a cool-looking project.
TIP: every other pset except the final project can be done through CS50.dev . You should create your final project in your local environment. Also, you have to push the final project and create a long 750 words of readme.md file and record a video about it.
Then submit it. but here you may face challenges. I had to submit manually for this.

Get Certificate

on cs50.me, you have to log in with GitHub and you can see your grade book. after completing each required psets and the final project you will be eligible to get a free certificate from Harvard. It’s yours!

Conclusion

Thanks for reading this. I hope you will get your certificate from Harvard. But this is not about the certificate. It’s about learning the valuable knowledge from the best instructors. you will love the whole journey.

Thanks for reading, this was all from my end. I hope you found some insightful things in this article. If you are facing any other challenges or have some more queries, Feel free to DM me on Twitter: Shihab Haque
cover-page credit: freecodecamp

DEV Community: Shihab Haque

Advanced React Hooks Explained With Real World Code Examples: Part 1

1. useActionState

Example:

2. useFormStatus

Example:

3. useDeferredValue

Example

4. useTransition

Example:

5. useDebugValue

Example

6. useOptimistic

Example

7. The use API

example

Conclusion

All the special files in NextJS

page.tsx

layout.tsx

loading.tsx

error.tsx

not-found.tsx

template.tsx

global-error.tsx

route.ts

default.tsx

middleware.ts

head.tsx

Conclusion

16 Essential JavaScript Best Practices for Smarter Coding

1. Always declare variables outside of a loop.

2. Try not to include multiple complex operations inside a single function.

3. Use let and const instead of var

4. Use one variable to define multiple values

5. Use Arrow functions

6. Use spread operator

7. Write meaningful comments

8. Use Template Literals (`)

9. Use Strong type checking(===)

10. Don't pollute the global prototype

11. Declare default parameter to function arguments

12. Give a Meaningful variable and function name

13. Know the falsy values

14. Quickly Assign Variable Values With Destructuring

15. Use Async/Await

16. avoid eval()

Conclusion

My Honest Review of Harvard’s CS50x: Tips, Guidelines & Free Certificate

Overview:

The 11weeks:

Is CS50 for me?

CS50 is definitely for you if,

CS50 is not for you if,

My guidelines:

We chose CS50 not because its easy, but because its hard.

Get Certificate

Conclusion

3. Use `let` and `const` instead of `var`

16. avoid `eval()`