Forem: Lior Amsalem

How To Define Typescript onChange Event In React

Lior Amsalem — Tue, 19 Mar 2024 09:04:00 +0000

In many cases when we write JSX code, HTML inside a react component and we’ll be using typescript. We’ll find ourself interacting with build in events of the browser. one of those events is known as “HTMLSelectElement” or the event that occurs when a user click on an element inside “option” and “Select” html tags. When user interact with those items, The browser fires event and we want to catch that event (to see what the user pick from the list of options) and perform actions accordingly.

In order to make the event itself accessible via Typescript here’s What we’ll do:

We’ll import changeEvent from react
We’ll use it to assign to the change event function
Than we’ll use “HTMLSelectElement” to define the type of the change event, which is a select HTML element.

Let’s see the code

import React, { ChangeEvent } from 'react';

// Define your component
const YourComponent: React.FC = () => {

  // Define the event handler function
  const handleMenuOnChange = (e: ChangeEvent<HTMLSelectElement>) => { // <----- here we assign event to ChangeEvent
    // Your logic here
    console.log(e.target.value); // Example: Log the value of the selected option
  };

  // Render your component with the event handler attached
  return (
    <select onChange={handleMenuOnChange}>
      {/* Your select options */}
      <option value="1">one</option>
      <option value="2">two</option>
    </select>
  );
};

export default YourComponent;

more code examples you can find here

How To Fix Samsung SSD Not Detected Mac book

Lior Amsalem — Wed, 13 Mar 2024 09:46:55 +0000

In case you’ve got yourself the new samsung SSD T7, T9 etc like myself. you might encounter a problem during the initial setup. in the empty SSD you’ll find a setup file for macbook called “SamsungPortableSSD_Setup_Mac_1.0.pkg” that is used to install “samsung portable SSD” application for samsung SSD external device.

T9 Not Detected
Even if you connect/disconnect the usb cable you might encounter the samsung portable ssd problem . even if you try to restart your mac or re-install the software samsung portable ssd the error will remain.

Solution
Simply follow the next steps to fix the problem and continue setup of T7, T9 ssd external drives.
Read More

Fine-grained Reactivity – Front end Rendering Champion

Lior Amsalem — Sun, 03 Mar 2024 06:10:09 +0000

Fine-grained reactivity refers to a programming paradigm or approach where updates to the user interface (UI) are handled at a very granular level, typically down to individual data changes. In the context of frontend development, this concept is often associated with libraries or frameworks that prioritize performance and efficiency by minimizing unnecessary re-renders of components.

In traditional virtual DOM-based frameworks like React, when the state of a component changes, the entire component is typically re-rendered. This approach can be inefficient, especially in large applications with complex UIs, as it can lead to unnecessary re-renders of components that are not affected by the state change.

Fine-grained reactivity addresses this issue by intelligently tracking dependencies between data and UI elements, ensuring that only the parts of the UI that are directly affected by state changes are updated. This means that if a specific piece of data changes, only the corresponding UI elements that depend on that data will be re-rendered, while other unaffected parts of the UI remain unchanged.

continue to read