Forem: Sonay Kara

React : Keeping Components Pure

Sonay Kara — Sat, 04 Jan 2025 21:52:44 +0000

If you like my articles, you can buy me a coffee or share it :)

Keeping Components Pure

Some JavaScript functions should be pure. Pure functions only perform a calculation and nothing else. By writing your components as pure functions, you can avoid all of the confusing errors and unpredictable behavior as your code base grows. You can make your components easy to manage.

Purity

So how can we create a pure function? And what characteristics should a function have for it to be pure? A pure function should be a function with the following characteristics :

It minds its own business. It does not change any objects or variables that existed before it was called.
Same input, same output. Given the same inputs, a pure function should always return the same result. It should not give different results to the same inputs.

Let's consider a mathematical formula : y = 2x

If x = 2, y = 4. This invariant is always the same result.

If x = 3, y = 6. This invariant is always the same result.

If x = 3, sometimes y will not be 9, –1, or 2.5, depending on some other situation.

If y = 2x and x = 3 then y will always be 6.

If we made this into a JavaScript function :

function getDouble(number) {
  return 2 * number;
}

getDouble is a pure function. If you pass it 3, it will return 6. Always.

React is built around this concept. It assumes that each component behaves like a pure function, meaning your React components should always return the same JSX output given the same inputs.

Let's explain a pure compound by giving examples.

function Member({ user }) {
  return (
    <ol>    
      <li> register {user} </li>
    </ol>
  );
}

export default function App() {
  return (
    <section>
      <Member user={2} />
      <Member user={4} />
    </section>
  );
}

It always returns whatever the user parameter is given. like a math formula

Conclusion

A component must be pure, meaning:

It minds its own business. It should not change any objects or variables that existed before rendering.

Same inputs, same output. Given the same inputs, a component should always return the same JSX.

React.js : Sharing State Between Components

Sonay Kara — Thu, 02 Jan 2025 23:34:58 +0000

If you like my articles, you can buy me a coffee or share it :)

In this article, we will focus on Sharing State Between Components in our react.js.

State is isolated and private

First of all, when we create a state in a component, we must understand how this state behaves. The state created within the component is local to the component. So what does this mean?

if you render the same component twice, each copy will have completely isolated state. Changing one of them will not affect the other. That is, updating the state of one of the same two components does not affect the other.

Let's explain with an example.

The same component was rendered twice and the button was clicked, the result is as follows.

Output :

As seen in the gif, each copy was completely isolated, and changing one of them did not affect the other.
What if you wanted both components to keep their states in sync? The right way to do it in React is to remove state from child components and add it to their closest shared parent.

Now in 3 steps, Let's keep the states of both components sync. Unlike props, state is completely specific to the component that declares it. To synchronize the state of two components, a shared state should be lifted to their nearest common parent and passed down to both components as props.

Step 1: Remove state from the child components

Let's transfer the isActive state to the parent component and add isActive to the Panel's prop list. Now the Panel’s parent component can control isActive by passing it down as a prop. Conversely, the Panel component now has no control over the value of isActive it’s now up to the parent component.

Step 2: setIsActive Prop

Let's send the function that updates the state to the child component as a prop.

Step 3: onClick Event

When the onClick event of the button is triggered, the setIsActive will run and the state will be updated.

Output :

Lifting state up often changes the nature of what you’re storing as state. So in this example it was active in two panels at the same time. If we wanted only one panel to be active at a time ? This means that the Accordion common parent component needs to keep track of which panel is the active one. Instead of a boolean value, it could use a number as the index of the active Panel for the state variable:

const [activeIndex, setActiveIndex] = useState(0);

When the activeIndex is 0, the first panel is active, and when it’s 1, it’s the second one.

Clicking the “Show” button in either Panel needs to change the active index in Accordion. A Panel can’t set the activeIndex state directly because it’s defined inside the Accordion. The Accordion component needs to explicitly allow the Panel component to change its state by passing an event handler down as a prop:

 <Panel
    isActive={activeIndex === 0}
    onShow={() => setActiveIndex(0)}
  >
    ...
  </Panel>
  <Panel
    isActive={activeIndex === 1}
    onShow={() => setActiveIndex(1)}
  >
    ...
  </Panel>

Output :

Conclusion

The state created within the component is local to the component. In this article, In this article, we examined how Sharing State Between Components. If you want, you can talk about Sharing State Between Components principles in the comments.

React.js : Choosing the State Structure

Sonay Kara — Mon, 30 Dec 2024 20:43:30 +0000

If you like my articles, you can buy me a coffee or share it :)

In this article, we will examine the important points when choosing state structure in our react.js projects.

Choosing the State Structure

When writing a react component, we need to decide how many states should be in the component and how we will use these states. For example, when writing a component, we used 3 states and our component works correctly, but you noticed that you can write the same component using 2 states. Therefore, you need to decide on the state structure.

I will talk about 5 principles to help you make better decisions when choosing the state structure.

1. Group the Related State Variables

Think of a character in a computer game, this character can move in x and y coordinates. So, if you wanted to write these x and y values as state, how would you do this?

Bad Approach :

Better Approach :

Technically, you can use either of these approaches. But, If you always update two or more state variables at the same time, consider merging them into a single state variable.

And If you don't know how many states you need, you can group the states using an object or a array.

2. Avoid Contradictions in State.

Think of a messaging app. You know that there are two different stages when you give approval to send a message. The first is "message is sending" and the second is "message has been sent". So, what would be the first thing that comes to our mind if we declared these two states as two different states, true and false ?

Bad Approach (Risk of Conflicts) :

Since isSending and isSent should never be true at the same time, it is better to replace them with one status state variable that may take one of three valid states: 'typing', 'sending', and 'sent'

Better Approach :

3. Avoid Redundant State

When choosing the state structure of a component, you need If you can calculate some information from the component's props or existing state variables, you should not keep this information in the component's state.

Bad Approach :

Better Approach :

When you call setFirstName or setLastName, you trigger a re-render, and then the next full Name will be calculated from the fresh data.

Conclusion

Structuring the state well ensures that you have components that are easy to modify and debug. In this article, I talked about 3 principles that should be considered when choosing the state structure. There may be more of these principles. If you want, you can talk about these principles in the comments.

Why Do Multiple JSX Tags Need To Be Wrapped? : Wrapping Into Another Tag or Fragment

Sonay Kara — Tue, 26 Nov 2024 20:53:57 +0000

Why do multiple JSX tags need to be wrapped?

JSX is a syntax extension for JavaScript. You can write HTML formatting inside a JavaScript file.

When using JSX, you know that when you want to use more than one tag, these tags must be in a wrapper. In this article, I will explain the reasons for this necessity.

JSX is written in JavaScript code and compiled "to JavaScript" by tools like Babel to make it understandable by the browser.

Now let's write an example JSX for React.js :

When this code is compiled it turns into the following :

When this code is compiled, you can understand that the React.createElement function should return only one root element by examining the compiled code.

Now you know why when you want to use multiple tags when using JSX, those tags must be in a wrapper. So what do we use for the wrapper?
Let's explain.

1. Wrapping with HTML Tag

You can use the div tag or use any other tag. But div tags are generally used.

Example :

2. Fragment Usage

This empty tag is called a Fragment ( <></> ). Fragments let you group things without leaving any trace in the browser HTML tree.

Example :

Conclusion

Now you know why when you want to use multiple tags when using JSX, those tags must be in a wrapper.

Converting HTML to JSX: Rules of JSX

Sonay Kara — Thu, 14 Nov 2024 22:18:23 +0000

We will learn what JSX is and the rules of JSX.

JSX is a syntax extension for JavaScript. You can write HTML formatting inside a JavaScript file.

It is based on Web, Html, Css and JavaScript. web developers wrote the content of the page separately as an Html file, the designs as a Css file, and the logic as a JavaScript file.

Need to know : JSX is a syntax extension, while React is a JavaScript library.


<div class="wrapper">HTML</div>


//CSS

.wrapper {
   display : flex;
}


function myFunction() {
  document.getElementById("wrapper").innerHTML = "Hello world";
}

But as the Web has become more interactive, logic has become more important. JavaScript was managing Html. Therefore, in React, logic and formatting live together in components.

React component example :

import React, { useState } from "react";

function App() {
  const [formData, setFormData] = useState({
    username: "",
    password: "",
  });

  const handleChange = (event) => {
    const { name, value } = event.target;
    setFormData((prevState) => ({ ...prevState, [name]: value }));
  };

  return (
    <form>
      <label>
        Username:
        <input
          type="text"
          name="username"
          value={formData.username}
          onChange={handleChange}
        />
      </label>
      <label>
        Password:
        <input
          type="password"
          name="password"
          value={formData.password}
          onChange={handleChange}
        />
      </label>
      <input type="submit" value="Submit" />
    </form>
  );
}

it is important to keep the rendering markup and logic together to keep an html tag in sync with each other with each editing.

React components are a JavaScript function that contains the markup that React rendering in the browser. React components use a syntax extension called JSX for this markup. JSX is looks like to Html.

The Rules of JSX

1. Return a single root element

To return elements from a component, wrap them with a single parent tag. You can use a or fragment (<></>)

For example div

<div> <h1>Hedy Lamarr's Todos</h1> <img src="https://picsum.photos/200/300" alt="lorempicsum" > </div>

For example <></>

<>
   <h1>Hedy Lamarr's Todos</h1>
  <img 
    src="https://picsum.photos/200/300" 
    alt="lorempicsum" 
  />
</>

Fragments let you group things without leaving any trace in the browser HTML tree.

2. Close all the tags

In JSX, all tags must be closed. For example, self-closing tags such as img in Html

Example :

<img 
    src="https://picsum.photos/200/300" 
    alt="lorempicsum" 
  />

3. camelCase

In React, many HTML properties are written with camelCase.

Example :

 <img 
    src="https://picsum.photos/200/300" 
    alt="lorempicsum" 
    className="photo"
  />

<button onClick={handleClick}>Click Me</button>

JavaScript in JSX

In JSX, sometimes you will want to add a little JavaScript logic or refer to a dynamic feature inside this markup. In this case, you can use brackets in JSX

Passing the string attribute to JSX

When you want to pass a string attribute to JSX, you put it in single or double quotes

Example :

export default function Avatar() {
  return (
    <img
      className="avatar"
      src="https://picsum.photos/200/300"
      alt="lorempicsum"
    />
  );
}

Here, src and alt are being passed as strings. but if you want to specify the src or alt text dynamically, you can use a value from javascript using curly braces instead of double quotes

Example :

export default function Avatar() {
  const avatar = 'https://picsum.photos/200/300';
  const description = 'lorempicsum';
  return (
    <img
      className="avatar"
      src={avatar}
      alt={description}
    />
  );
}

Using Curly Braces

It is possible to use JavaScript with curly braces {}. You can use functions, variables and more.

Example :

import React, { useState } from 'react';
     const content = 'Toggle Text';
    function ToggleText() {
      const [isVisible, setIsVisible] = useState(true);

      return (
        <div>
          {isVisible && <p>This text is toggleable</p>}
          <button onClick={() => setIsVisible(!isVisible)}>
            {content}
          </button>
        </div>
      );
    }

    export default ToggleText;

Using Double Curlies Braces

React does not require you to use inline styles (CSS classes work great for most cases). But when you need an inline style, you can pass an object to the style attribute. Use double curlies braces.

Example :

export default function TodoList() {
  return (
    <ul style={{
      backgroundColor: 'black',
      color: 'pink'
    }}>
      <li>lorem ipsum</li>
    </ul>
  );
}

You see {{ }} in JSX, know that it’s object inside the JSX curlies.
Inline style properties should be write as camelCase.

You can move several expressions into one object, and use them in your JSX inside curly braces

const person = {
  name: 'Gregorio Y. Zara',
  theme: {
    backgroundColor: 'red',
    color: 'yellow'
  }
};

export default function TodoList() {
  return (
    <div style={person.theme}>
      <h1>{person.name}'s Todos</h1>
    </div>
  );
}

Conclusion

JSX is an important tool that makes web development processes more effective and practical. With JSX, you can keep the render markup and logic together to keep an html Decal synchronized with each other in every edit.

If you like my articles, you can buy me a coffee :)

NodeList vs HTMLCollection: The Difference Between Live and Static Collections

Sonay Kara — Tue, 05 Nov 2024 19:20:13 +0000

we will examine NodeList and HTMLCollection in detail and what the NodeList and HTMLCollection.

First, Both have a length property that returns the number of elements in the list (collection).

1. HTMLCollection

HTMLCollection in the HTML DOM is live; getElementsByClassName() or getElementsByTagName() returns a live HTMLCollection representing an array-like object of all child elements which have all of the given class names.

Example :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>NodeList and HTMLCollection</title>
</head>
<body>
      <ul class="items">
        <li>item-1</li>
        <li>item-2</li>
        <li>item-3</li>
        <li>item-4</li>
      </ul>
      <ul class="items">
        <li>item-5</li>
        <li>item-6</li>
        <li>item-7</li>
        <li>item-8</li>
      </ul>
      <ul class="items">
        <li>item-9</li>
        <li>item-10</li>
        <li>item-11</li>
        <li>item-12</li>
      </ul>
    <script src="/script.js"></script>
</body>
</html>

const selected = document.getElementsByClassName("items")
console.log(selected)

Output :

HTMLCollection is automatically updated when the underlying document is changed.

Let's write an example :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>NodeList and HTMLCollection</title>
</head>
<body>
    <div class="card" >
        <div class="card-body" id="main">
          <h5 class="card-title">dev community</h5>
          <p class="card-text">dev community sonay kara</p>
          <a href="#" class="btn btn-primary">dev community sonay kara</a>
        </div>
      </div>

    <script src="/script.js"></script>
</body>
</html>

const selected = document.getElementsByClassName("card")
console.log(selected)
selected[0].innerHTML += `<li class="card">dev.to</li>`;
console.log(selected)

Output :

As can be seen from the output, when a new HTML tag is added to the element with the card class, the HTMLCollection is updated because it is live

2. NodeList

querySelectorAll() returns a static (non live) NodeList representing a list of the document's elements that match the specified group of selectors. but childNodes return a live NodeList.

Example :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>NodeList and HTMLCollection</title>
</head>
<body>
      <ul class="items">
        <li>item-1</li>
        <li>item-2</li>
        <li>item-3</li>
        <li>item-4</li>
      </ul>
      <ul class="items">
        <li>item-5</li>
        <li>item-6</li>
        <li>item-7</li>
        <li>item-8</li>
      </ul>
      <ul class="items">
        <li>item-9</li>
        <li>item-10</li>
        <li>item-11</li>
        <li>item-12</li>
      </ul>
    <script src="/script.js"></script>
</body>
</html>

const selected = document.querySelectorAll(".items")
console.log(selected)

Output :

The NodeList returned by querySelectorAll() is not automatically updated when changes are made to the underlying document because its non live.

Let's write an example :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>NodeList and HTMLCollection</title>
</head>
<body>
    <div class="card" >
        <div class="card-body" id="main">
          <h5 class="card-title">dev community</h5>
          <p class="card-text">dev community sonay kara</p>
          <a href="#" class="btn btn-primary">dev community sonay kara</a>
        </div>
      </div>

    <script src="/script.js"></script>
</body>
</html>

const selected = document.querySelectorAll(".card")
selected[0].innerHTML += `<li class="card">dev.to</li>`;
console.log(selected)

Output :

Browser

Console

As can be seen from the outputs, when a new HTML tag is added to the element with the card class, the browser updates, but the NodeList is not updated because NodeList is not live.

The NodeList returned by childNodes is automatically updated when changes are made to the underlying document because its live.

Example :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>NodeList and HTMLCollection</title>
</head>
<body>
    <div class="card" >
        <div class="card-body" id="main">
          <h5 class="card-title">dev community</h5>
          <p class="card-text">dev community sonay kara</p>
          <a href="#" class="btn btn-primary">dev community sonay kara</a>
        </div>
      </div>

    <script src="/script.js"></script>
</body>
</html>

const selected = document.querySelector(".card")
selected.innerHTML += `<li class="card">dev.to</li>`;
console.log(selected.childNodes)

Output :

As can be seen from the output, when a new HTML tag is added to the element with the card class, the NodeList is updated because it is live.

Conclusion

In conclusion, an HTMLCollection is always a live collection. A NodeList is most often a static collection.

We examined what NodeList and HTMLCollection are. Now you know what NodeList and HTMLCollection are.

Why Virtual DOM: Render and Performance

Sonay Kara — Fri, 01 Nov 2024 23:04:43 +0000

In this article, we will examine the dom in detail and what the virtual dom is.

What is the DOM (Document Objec Model) ?

When a web page is loaded into the browser, the browser generates HTML to display the requested page to . This html structure is like a tree. DOM is formed as a result of converting the content of a web document (HTML or XML) into an object-oriented structure by the browser.Thanks to this structure, the page content is organized in a tree structure in the browser, and each HTML tag or content is represented as a "node".

Now explore the document object model :

Let's write an example code to access the document object.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document object model</title>
</head>
<body>
    <div class="card" style="width: 18rem;">
        <img class="card-img-top"  alt="Card image cap">
        <div class="card-body">
          <h5 class="card-title">Lorem, ipsum dolor.</h5>
          <p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic, tenetur!</p>
          <a href="#" class="btn btn-primary">Lorem, ipsum.</a>
        </div>
      </div>


    <script src="/script.js"></script>
</body>
</html>

console.log(document)

Output :

We can access the dom with console.log(document). When we examine the Document object, we understand that this object represents an HTML document. In other words, the document object contains all the tags in an HTML document.

With Javascript, we can access the tags inside the document object and manipulate the tags inside this document object to create dynamic web pages. Let's give an example of how to access :

const wrapper = document.getElementById("card")

console.log(wrapper)

Output:

What is the Virtual DOM?

We now know that the easiest way to change the dom ("Change HTML") is to change the innerHTML property in an element. This method of modifying html does not performance well in DOM repainting (" Updating what the user sees ").This is because innerHTML needs to parse DOM nodes from a string, preprocess, and append it. if there are too many html mutations on a web page, there will be a performance issue.

So how were the performance issue fixed ?

This problem was fixed by creating a virtual DOM. The virtual DOM is a copy of the real DOM stored in memory. When the user interacts with the web page and the state of the web page is updated, a new virtual DOM is created in memory. This new virtual DOM is compared to the previous virtual DOM to identify changes, and these changes are applied to the real DOM to be shown to the user.

This is the working logic of the modern libraries you use and uses the dif algorithm for comparison. they all use virtual DOM. But although the virtual DOM approach is fast, there are points that need to be considered for performance. A change in the virtual domain renders the entire web page Libraries have hooks for performance optimizations

Conclusion

in this article, we have examined what dom and virtual DOM are. We found out why virtual dom is used. Now you know what dom and virtual dom are.

Some new features CSS in 2024

Sonay Kara — Sat, 26 Oct 2024 20:42:36 +0000

In this article we will explore some new CSS features in 2024.

If you like my articles, you can buy me a coffee :)

1. CSS container queries

Container queries allow you to apply a style to an item depending on the size of the item's container.Container queries work like media queries.

Using container queries

Using container queries, you can dynamically adjust the style of child elements within a parent element according to their size.

To do this, you must first define a container context for the parent element. You specify this with the container-type property.

container-type: size; When set to , you can query by both width and height values.
container-type: inline-size; When set to , query is made only on width (horizontal dimension).

Thanks to this feature, the style properties of child elements can be changed depending on the size of the parent element.

Examples :

 <div class="post">
        <div class="card">
          <h2>Card title</h2>
          <p>Card content</p>
        </div>
  </div>

.post {
    container-type: size;
  }

  .card h2 {
    font-size: 1em;
    color: blue;
  }

  @container (min-width: 700px) {
    .card h2 {
      font-size: 5em;
      color: purple;
    }
  }

Output :

2. Css Nesting

With CSS nesting, you can place one rule inside another. This is especially useful for managing styles that are context-dependent. For example, if you have a .container class and want to style its .item elements, you can write the .item rules directly inside the .container rule. CSS Nesting is parsed directly by the browser. This means you don’t need a preprocessor to compile nested rules; they work natively in the browser.

Examples :

<form>
        <label for="name">Name:
          <input type="text" id="name" />
        </label>
        <label for="surname">Surname:</label>
        <input type="text" id="surname" />
      </form>


 input {

    border: red 2px solid;
  }
  label {
    font-family: system-ui;
    font-size: 1.25rem;
    & input {

      border: purple 2px solid;
    }
  }

Output :

3. :scope Pseudo Class

The Scope Selector is used to define the scope for styles in CSS.

Usage :

If :scope is at the root level of a css, it is equivalent to :root

Examples :

<html></html>

:scope {
  background-color: orange;
}

Output :

Using :scope within @scope blocks allows for clear and targeted styling based on the context defined by the class names.

Examples :

<div class="light">
  <p>
    <a href="#">dev.to</a>,

  </p>
</div>

<div class="dark">
  <p>
  Lorem Ipsum
    <a href="#">dev.to</a>,

  </p>
</div>

@scope (.light) {
  :scope {
    background-color: black;
  }

  a {
    font-size : 2rem;
  }
}

@scope (.dark) {
  :scope {
    background-color: yellow;
    color: purple;
  }

  a {
   font-size : 4rem;
  }

Output :

4. :has() Pseudo Class

The :has() selector in CSS allows you to style a parent element if it contains a specific child element.

Examples :

<p>
  Lorem Ipsum is that it has a more-or-less normal distribution of letters,<a href="/">as opposed to using 'Content here, content here', making it look like readable English.</a> 
</p>

 p:has(a) {
   font-size: 40px;
  }

Output :

5. Color Functions

You can have much more control over the tones and contrasts of colors with new color functions such as color-mix() and color-contrast()

Examples :

color-mix(in lab, plum 60%, #f00 50%)
color-contrast(wheat vs tan, sienna, #d2691e)
color-contrast(#008080 vs olive, var(--myColor), #d2691e)

6. Anchor Positioning

The CSS anchor positioning module defines features that allow you to tether elements together. Certain elements are defined as anchor elements; anchor-positioned elements can then have their size and position set based on the size and location of the anchor elements to which they are bound.

Conclusion

In this article, we explored some new features CSS in 2024. You can use this features for app.

Understanding the Key Property in React - Common Mistakes

Sonay Kara — Fri, 25 Oct 2024 15:28:17 +0000

If you like my articles, you can buy me a coffee :)

When working with lists in React, one of the most critical concepts is the key property. Keys play a significant role in how React manages list updates.

What Are Keys in React?

In React, keys are unique identifiers assigned to elements within a list. These keys help React determine which items have changed, been added, or been removed. By providing a stable identity for each element, keys enable React to optimize rendering performance and maintain the correct state for each component.

Why Are Keys Important?

When a list is rendered, React needs to know how to efficiently update the UI. Without keys, React may have to re-render the entire list, leading to performance issues and the potential loss of component state. Keys help React optimize this process:

Identifying Elements: Keys allow React to match elements between the previous render and the current render.
Optimizing Reconciliation: By keeping track of the order of elements, React can make more efficient updates and minimize unnecessary re-renders.
Maintaining State: When elements are dynamically added or removed, keys help ensure that the state of components remains consistent.

When Should Keys Be Used?

Keys should be provided whenever a list of elements is rendered. This includes:

Rendering Arrays: When using .map() to render elements.
Dynamic Lists: In situations where the items in the list can change over time (adding, removing, or reordering).

How to Use Keys

Use a unique identifier from the data.

Example:

const TodoList= ({ todos }) => {
  return (
    <ul>
      {todos.map(todo => (
        <li key={todo.id}>{todo.text}</li>
      ))}
    </ul>
  );
};

export default TodoList;

In this example, a unique id is used as the key for each todo item, allowing React to effectively track changes in the list.

Common Mistakes

While using keys is crucial, there are some common mistakes that developers should avoid:

Bad practice example:

{todos.map((todo, index) => (
  <li key={index}>{todo.text}</li>
))}

Instead, always use a unique identifier from your data.

Non-Unique Keys: Keys must be unique among siblings. If two elements have the same key, React cannot distinguish between them, which can lead to potential errors.
Not Updating Keys When Data Changes: If you have a dynamic list and forget to update the keys when the data changes, React may fail to make the necessary updates, leading to stale or incorrect UI.

Conclusion

The key property in React is a small but powerful tool that can significantly affect the performance and correctness of your application. By understanding and applying keys effectively, you can optimize your components and provide a smoother user experience. As you develop your React applications, always keep keys in mind when rendering lists and adhere to the best practices outlined in this article.

Next.js 15 : Incremental Static Regeneration (ISR)

Sonay Kara — Fri, 25 Oct 2024 11:55:53 +0000

With Incremental Static Regeneration (ISR)

Incremental Static Regeneration (ISR) in Next.js provides a powerful approach to combine the best of static and dynamic content. By enabling static content updates without recreating the entire site, ISR allows for a more scalable and efficient way of handling pages. We can significantly reduce server load, handle large volumes of content, and ensure users see up-to-date information without waiting for full regeneration of all pages.

We can update static content without recreating the entire site. We can reduce the server load by providing prerendered static pages for most requests.We can process a large number of content pages before the next creation times are long.

Let's start with an example :

export const revalidate = 30

export const dynamicParams = true // or false, to 404 on unknown paths

export async function generateStaticParams() {
  const posts = await fetch('https://jsonplaceholder.typicode.com/posts/').then((res) =>
    res.json()
  )
  return posts.map((post) => ({
    id: String(post.id),
  }))
}

export default async function Page({ params }) {
  const post = await fetch(`https://jsonplaceholder.typicode.com/posts/${params.id}`).then(
    (res) => res.json()
  )
  return (
    <main>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </main>
  )
}

How this example works ?

All requests made to these pages (e.g. /post/1) are cached and instantaneous. After 30 seconds has passed, the next request will still show the cached (stale) page. The cache is invalidated and a new version of the page begins generating in the background. Once generated successfully, Next.js will display and cache the updated page If /post/12 is requested, Next.js will generate and cache this page on-demand.

If you need more precision, on-demand revalidation can be used, but if you need real-time data, consider switching to dynamic processing.

On-demand Revalidation with revalidatePath

Next.js allows you to manually clear the cache of a specific page or route . That is, when a certain content is updated, instead of recreating all the pages, you can only recreate the changed page or content.

You want the page to be updated immediately when there is a change (for example, when a new post is added), you can trigger this process by using the revalidatePath function. In other words, you can make the new content appear as soon as a new content is added to the user.

'use server'

import { revalidatePath } from 'next/cache'

export async function createPost() {
  // Invalidate the /posts route in the cache
  revalidatePath('/posts')
}

On-demand Revalidation with revalidateTag

Next.js applications, it allows you to manually clear their cache by tagging certain data or content. This is used to clear the entire cache of that content when a certain content changes. When the content is updated, users see the latest data.

export default async function Page() {
  const data = await fetch('https://api.vercel.app/blog', {
    next: { tags: ['posts'] },
  })
  const posts = await data.json()
  // ...
}

You can then use revalidateTag :

'use server'

import { revalidateTag } from 'next/cache'

export async function createPost() {
  // Invalidate all data tagged with 'posts' in the cache
  revalidateTag('posts')
}

ISR is not supported when creating a Static Export. If you have multiple fetch requests in a statically rendered route, and each has a different revalidate frequency, the lowest time will be used for ISR. However, those revalidate frequencies will still be respected by the Data Cache.If any of the fetch requests used on a route have a revalidate' time of 0, or an explicit no-store, the route will be dynamically rendered. Middleware won't be executed for on-demand USER requests, meaning any path rewrites or logic in Middleware will not be applied. Ensure you are revalidating the exact path. For example, /post/1 instead of a rewritten /post-1.

Conclusion

ISR is an optimal solution for projects where content updates frequently, but full dynamic rendering is not necessary. However, in scenarios where real-time data is a priority, switching to dynamic processing might be more appropriate.

If you like my articles, you can buy me a coffee :)

Understanding and Using Javascript Console API

Sonay Kara — Wed, 23 Oct 2024 22:47:40 +0000

If you like my articles, you can buy me a coffee :)

The console API is used for debugging, printing messages, and transferring various information to the console, especially in JavaScript runtimes such as browsers and Node.js. But in order to use the console api correctly, you need to know exactly what the console API is.

In this article, I will explain the console API to you. Console API is an object. This object has keys, and when you write a console method, you access the value of a key in the console object.

Now, I will explain to you by coding my own console object so that you can understand the logic of how the log method works in the console API.

const customConsole = {
    log: function(message) {
        const timestamp = new Date().toISOString();
        const output = `[${timestamp}] LOG: ${message}`;
        alert(output); // Displaying the output (replace with console.log in a real scenario)
    }
};

customConsole.log("Hello, this is a custom console log!");

Try to read the code. As can be seen in the code, I created a custom console object and defined a key for this object, and the value of this key is a function. Then I accessed the log key of this object.

As a result, the console API doesn't just have a "log" method. So how many are there? Let's find out now.

As seen in the photo, the console object has more than one key and the values of these keys. These values are functions.

We can access these functions with the console object.

console.error()
console.warn()

Now let's learn what some of these functions.

1. console.debug()

console.debug , a function in JavaScript used for debugging purposes in the browser console. By default, output from the console.debug() method will not be visible in Chrome developer tools.

Example :

function subtract(a, b) {
    console.debug("subtract function called:", { a, b });
    const result = a - b;

    if (result > 0) {
        console.debug("Result is positive.");
    } else if (result < 0) {
        console.debug("Result is negative.");
    } else {
        console.debug("Result is zero.");
    }

    return result;
}


let result = subtract(10, 5);

Output :

output from the console.debug() method will not be visible in Chrome developer tools.

2. console.error()

It is a method used in JavaScript to print error messages to the console. It is used to facilitate debugging when an error occurs. the message may receive special formatting, such as red colors and a error icon.

Example :

async function fetchData(ıd) {
    try {
        const response = await fetch(`https://jsonplaceholder.typicode.com/posts/${ıd}`);

        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }

        const data = await response.json();
        console.log("posts data fetched successfully:", data);
        return data;

    } catch (error) {
        console.error(" error posts data :", error.message);
    }
}

fetchData(1);

If there is an error while fetching data, this is the output :

3. console.warn()

It is a method used in JavaScript to print potential problems or situations that require attentionthe console. It is used to facilitate debugging when an error occurs. the message may receive special formatting, such as yellow colors and a warning icon.

Example :


  if (password.length < minLength) {
        console.warn("Warning: Password must be at least 8 characters long.");
        return false; 
    }

4. console.dir()

The console.dir() method displays a list of the properties of the specified JavaScript object. In browser consoles, the output is presented as a hierarchical listing with disclosure triangles that let you see the contents of child objects.

Example :

const basket =  {
    name : "t-shirt",
    price : 100,
    quantity : 1,
    color : [ "blue" , "red" , "yellow"],
    size : [ "xs" , "s" , "m" , "l" , "xl"],
    total : function() {
        return this.price * this.quantity;
    }

}

console.dir(basket)

Output :

5. console.dirxml()

The console.dirxml() method displays an interactive tree of the descendant elements of the specified XML/HTML element. If it is not possible to display as an element the JavaScript Object view is shown instead. The output is presented as a hierarchical listing of expandable nodes that let you see the contents of child nodes.

Example :

console.dirxml(document.body);

Output :

6. console.assert()

The console.assert() method writes an error message to the console if the assertion is false. If the assertion is true, nothing happens.

Example :

consolle.assert("a" === "f" , error message)

Output :

7. console.count()

The console.count() method logs the number of times that this particular call to count() has been called.

Example :

function greet(user) {
  console.count();
  return `hi ${user}`;
}

greet("micheal");
greet("roman");
greet();
console.count();

Output :

Conclusion

If a condition is not true, it prints an error message. If the condition is true, it won't print anything.

The 4 Most Common Mistakes When Using useState in React

Sonay Kara — Wed, 23 Oct 2024 08:55:41 +0000

When using useState, you may make mistakes, and these mistakes can sometimes reduce performance. As a result, your application may run inefficiently. If you avoid the common mistakes I'm about to explain, your application will run efficiently and with better performance.

If you like my articles, you can buy me a coffee :)
Buy me coffee

1. Using a Function to Initialize useState

When initializing state with useState, if the initial state is the result of an expensive function, this function will be called on every render. This can severely impact performance, especially if the function involves complex computations.

Incorrect usage:

const [data, setData] = useState(expensiveFunction());

In this example, expensiveFuncttion is called on every render, leading to unnecessary performance costs.

Correct usage:

const [data, setData] = useState(() => expensiveFunction());

By using a function inside useState, the expensiveFuncttion is only called during the initial render, saving resources on subsequent renders.

2. Misusing the setState Function

When updating state in React, especially when the new state depends on the previous state, it's important to use the functional form of setState. A common mistake is updating state without taking the previous value into account.

Incorrect usage:

setCount(count + 1);

This can cause issues if multiple updates are triggered in quick succession because count might not have the most updated value.

Correct usage:

setCount(prevCount => prevCount + 1);

This approach ensures that the state is updated based on its previous value, making it more reliable.

3. Incorrect Placement of useState

Placing hooks inside loops, conditions, or nested functions can break React's state management mechanism.

Incorrect usage:

if (condition) {
  const [value, setValue] = useState(false);
}

This violates React's rules because useState should not be placed inside conditional statements

Correct usage:

const [value, setValue] = useState(false);

if (condition) {
  // Use the state here
}

By keeping useState outside of conditions or loops, React can properly manage the order in which hooks are called.

4. Mutating State Directly

State in React should be treated as immutable. Directly mutating the state can lead to unexpected bugs and issues, particularly when dealing with objects or arrays.

Incorrect usage:

const [user, setUser]= useState({ name: 'John', age: 35 });
user.name = 'Jane';  // Incorrect mutation
setUser(user);       // Incorrect update

Mutating user directly doesn't trigger a re-render because React doesn't detect the state change.

Correct usage:

setUser(prevUser => ({
  ...prevUser,
  name: 'Jane'
}));

Here, a new object is created using the spread operator, ensuring the immutability of state and triggering a proper re-render.

Conclusion

In this article, we learned how the useState hook works. If you pay attention to the points I’ve explained, the performance and efficiency of your application will improve.