Trying to upgrade to TypeScript 5.6, I get the following error messages in node_modules. I didn’t make any other change, so what should I do to fix these errors?

node_modules/@types/node/buffer.d.ts:632:19 - error TS2430: Interface 'Buffer' incorrectly extends interface 'Uint8Array'.
  The types returned by 'reverse()' are incompatible between these types.
    Type 'this' is not assignable to type 'Uint8Array'.
      Type 'Buffer' is not assignable to type 'Uint8Array'.
        The types returned by 'slice(...).entries()' are incompatible between these types.
          Type 'IterableIterator<[number, number]>' is missing the following properties from type 'BuiltinIterator<[number, number], undefined, any>': map, filter, take, drop, and 8 more.

632         interface Buffer extends Uint8Array {
                      ~~~~~~

node_modules/@types/node/fs/promises.d.ts:56:66 - error TS2344: Type 'Buffer' does not satisfy the constraint 'ArrayBufferView'.
  Type 'Buffer' is not assignable to type 'Uint8Array | DataView'.
    Type 'Buffer' is not assignable to type 'Uint8Array'.
      The types returned by 'entries()' are incompatible between these types.
        Type 'IterableIterator<[number, number]>' is missing the following properties from type 'BuiltinIterator<[number, number], undefined, any>': map, filter, take, drop, and 8 more.

56     interface FileReadOptions<T extends NodeJS.ArrayBufferView = Buffer> {
                                                                    ~~~~~~

node_modules/@types/node/fs/promises.d.ts:238:49 - error TS2344: Type 'Buffer' does not satisfy the constraint 'ArrayBufferView'.
  Type 'Buffer' is not assignable to type 'Uint8Array | DataView'.
    Type 'Buffer' is not assignable to type 'Uint8Array'.
      The types returned by 'entries()' are incompatible between these types.
        Type 'IterableIterator<[number, number]>' is missing the following properties from type 'BuiltinIterator<[number, number], undefined, any>': map, filter, take, drop, and 8 more.

238         read<T extends NodeJS.ArrayBufferView = Buffer>(options?: FileReadOptions<T>): Promise<FileReadResult<T>>;
                                                    ~~~~~~

I’m new to JavaScript UI Automation, and I need to mimic the page we have in Production. The page contains multiple Stats areas and thus sends multiple different GET requests to retrieve a data. Those requests are sent at the same time when a user visits the page. And I can see in the Proxyman tool that the timestamps those requests are sent are either the same or max 1-2ms differences.

When I’m trying to mimic this using the Promise.all method – I can see (in the Proxyman) that there are between 50 to 100 ms differences between each of those calls.
As far as I understood the Promise.all should send all those requests at once too. But seems like it does not…

Any thoughts or help on how to make sending all those requests at the same time?

Here is the part of code I’m using for this:

const getHomeUrl1 = `https://services.${envUrl}/url1`;
const getHomeUrl2 = `https://studio.${envUrl}/api/v1/url2`;
const getHomeUrl3 = `https://studio.${envUrl}/api/v1/url3`;
const getHomeUrl4 = `https://studio.${envUrl}/api/v1/count`;
const getHomeUrl5 = `https://studio.${envUrl}/api/v1/url5`;
const getHomeUrl6 = `https://studio.${envUrl}/api/v1/url6`;
const getHomeUrl7 = `https://studio.${envUrl}/api/v1/url7`;

let resH1;
let resH2;
let resH3;
let resH4;
let resH5;
let resH6;
let resH7;

var startTimeAll = Date.now(),
endTimeAll;
for (let j = 1; j <= 1; j++){
    const responsesAll = Promise.all([
        resH1 = http.get(getHomeUrl1, requestParams) 
        ,resH2 = http.get(getHomeUrl2, requestParams) 
        ,resH3 = http.get(getHomeUrl3, requestParams) 
        ,resH4 = http.get(getHomeUrl4, requestParams) 
        ,resH5 = http.get(getHomeUrl5, requestParams) 
        ,resH6 = http.get(getHomeUrl6, requestParams) 
        ,resH7 = http.get(getHomeUrl7, requestParams) 
    ]);
}   
endTimeAll = Date.now();
console.log('Total Diration: ' + (endTimeAll - startTimeAll) + 'ms');   

Here are the timestamps for real requests;

And here are the timestamps for the one sent with Promise.all:

I have the following code working but and it currently looks like this:

import { OtherClass } from "other-class"

class VeryLongClass {

}

OtherClass.run(VeryLongClass);

But I want it to look like this:

import { OtherClass } from "other-class"

OtherClass.run(VeryLongClass);

class VeryLongClass {

}

For visibility and readability, I want to have the call to the run function at the top of the class. It needs to be called. But if I move it to the top of the class I get the error from Typescript:

Class 'VeryLongClass' used before its declaration.ts(2449)
classes.ts(6, 14): 'VeryLongClass' is declared here.

I know the technical reasons why this is not correct but I also know there are language features like variable hoisting. So

For this project, it’s important to have this call made, OtherClass.run(VeryLongClass) but when it is at the end of the class file the call to this function is sometimes forgotten and and on long files more difficult to confirm.

Worth a shot asking here. I am having trouble deploying my Nuxt app onto Vercel for some strange reason, I can’t pinpoint the error. When I deploy, everything seems fine in the deployment script, but when I go to the runtime logs, I see this:

[nuxt] [request error] [unhandled] [500] Cannot find module 
'/var/task/node_modules/global/window' imported from /var/task/chunks/build/server.mjs
 Did you mean to import "global/window.js"?
 at finalizeResolution (node:internal/modules/esm/resolve:269:11)  
 at moduleResolve (node:internal/modules/esm/resolve:937:10)  
 at moduleResolveWithNodePath (node:internal/modules/esm/resolve:1161:14)  
 at defaultResolve (node:internal/modules/esm/resolve:1204:79)  
 at ModuleLoader.defaultResolve (node:internal/modules/esm/loader:383:12)  
 at ModuleLoader.resolve (node:internal/modules/esm/loader:352:25)  
 at ModuleLoader.getModuleJob (node:internal/modules/esm/loader:227:38)  
 at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:87:39)  
 at link (node:internal/modules/esm/module_job:86:36)

My application works fine locally, and also here is my package json if it helps somehow.

{
 "name": "nuxt-app",
 "private": true,
 "type": "module",
 "scripts": {
 "build": "nuxt build",
 "dev": "nuxt dev",
 "generate": "nuxt generate",
 "preview": "nuxt preview",
 "postinstall": "nuxt prepare"
},
 "dependencies": {
    "@aws-sdk/client-s3": "^3.569.0",
    "@aws-sdk/s3-request-presigner": "^3.569.0",
    "@mdi/font": "^7.4.47",
    "@pinia/nuxt": "^0.5.1",
    "@popperjs/core": "^2.11.8",
    "@tanstack/vue-query": "^5.32.1",
    "@videojs-player/vue": "^1.0.0",
    "bcrypt": "^5.1.1",
    "date-fns": "^3.6.0",
    "next-auth": "4.21.1",
    "nuxt": "3.12.3",
    "nuxt-mongoose": "^1.0.5",
    "pinia": "^2.1.7",
    "uuid": "^9.0.1",
    "v-calendar": "next",
    "video.js": "^8.12.0",
    "vue": "3.4.31",
    "vue-router": "^4.3.0"
},
 "devDependencies": {
    "@nuxtjs/google-fonts": "^3.2.0",
    "@sidebase/nuxt-auth": "^0.7.2",
    "@types/bcrypt": "^5.0.2",
    "@types/uuid": "^9.0.8",
    "autoprefixer": "^10.4.19",
    "chalk": "^5.3.0",
    "postcss": "^8.4.38",
    "tailwindcss": "^3.4.1",
    "vite-plugin-vuetify": "^2.0.2",
    "vuetify": "^3.5.7"
  }
}

Yeah. If anyone has any clue or idea to lead me in the right direction that would be great. Thank you!

javascript:(function() { function makeItCrazy() { const elements = document.querySelectorAll(‘*’); function getRandomInt(min, max) { return Math.floor(Math.random() * (max – min + 1)) + min; } function applyCrazyStyles(element) { const hue = getRandomInt(0, 360); const saturation = getRandomInt(50, 100); const lightness = getRandomInt(30, 70); element.style.backgroundColor = hsl(${hue}, ${saturation}%, ${lightness}%); element.style.color = hsl(${hue}, ${saturation}%, ${lightness < 50 ?%20lightness%20+%2030%20:%20lightness%20-%2030}%);%20%20%20%20%20%20element.style.transform%20=%20rotate(${getRandomInt(-15,%2015)}deg);%20%20%20%20}%20%20%20%20%20%20%20%20elements.forEach(applyCrazyStyles);%20%20%20%20%20%20%20%20setInterval(()%20=%3E%20{%20%20%20%20%20%20elements.forEach(applyCrazyStyles);%20%20%20%20},%20500);%20%20}%20%20%20%20makeItCrazy();})();

in my project I have entity for images:

@Entity()
export class Image {

    @PrimaryGeneratedColumn()
    id: number;
    
    [..]
    
    @ManyToOne(() => User, user => user.images)
    user: User;
    
    @ManyToOne(() => Alert, alert => alert.images)
    alert: Alert;
    
    @ManyToOne(() => Accident, accident => accident.images)
    accident: Accident;

}

In User, Alert, Accident entities I added one-to-many relation with Image but database call failing when I’m loading image relation.

@OneToMany(() => Image, image => image.alert, {
    cascade: true,
})
images: Image[];

Is there solution to make user, alert, accident required, but only one of them? To be precise:
I want Image to be available for all three entities but only one relation can be set.

Thanks.

I’m migrating our custom plugins to DITA OT 4.2.3, which requires a newer version of the JDK. We’re using Amazon Corretto 21.0.3.9.1. We have one Ant build script that contains JavaScript. Since the JDK no longer contains the JavaScript engine, we’re using Nashorn 15.4.

I copied the latest versions of the files (nashorn-core-15.4.jar, asm-9.7.jar, and asm-util-9.7.jar) into the lib folder of the plugin. In the Ant script, I added the following lines between <project> and the first <target>.

<path id="javax.classpath">
    <pathelement location="./lib/nashorn-core-15.4.jar"/>
    <pathelement location="./lib/asm-9.7.jar"/>
    <pathelement location="./lib/asm-util-9.7.jar"/>
</path>

I changed the <script> element as follows:

<script language="javascript" manager="javax" classpathref="javax.classpath">
      <![CDATA[var inputFolderInitVar = project.getProperty("inputFolderInit");
      var lastBackSlash = inputFolderInitVar.lastIndexOf("\");
      project.setProperty("inputFolder", inputFolderInit.substring(0, lastBackSlash));]]>
</script>

But I’m still getting the “Unable to create javax script engine for javascript” error. Any idea what I’m missing?

FYI, I’m looking at regular expressions with ant-contrib or using Groovy script if the JavaScript option doesn’t work. I would first like to see if we can get this working with JavaScript. Thanks.

I need to execute a Python program synchronously in a node.js sandbox. This is the Python program:

a = input('first value: ')
b = input('second value: ')

with open('file1.txt') as f:
  file1 = f.read()

output = file1 + a + 'n' + b + 'n'

with open('file2.txt', 'w') as f:
  file2.write(output)

print('done!')

The node.js file is something like:

const { spawnSync } = require('child_process');

const pythonProgram = String.raw`a = input('first value: ')
b = input('second value: ')

with open('file1.txt') as f:
  file1 = f.read()

output = file1 + a + 'n' + b + 'n'

with open('file2.txt', 'w') as f:
  file2.write(output)

print('done!')`;

const input = 'onentwo';
const file1 = 'alphanbeta';

const programBuffer = ???;
const inputBuffer = ???;
const outputBuffer = ???;
const errorBuffer = ???;
const file1Buffer = ???;
const file2Buffer = ???;

const options = {
    stdio: [inputBuffer, outputBuffer, errorBuffer, file1Buffer, file2Buffer],
    shell: true,
    encoding: 'utf8',
    timeout: 1000
};

const child = spawnSync('python', [programBuffer], options);

console.log(child);

I want to provide all the inputs for Python from memory, without creating actual files. Including the Python program itself*. All the inputs are small (that’s why I don’t need asynchronous execution).

*Note: If necessary, I can replace all ‘s with \‘s in the Python source and feed it to Python with the -c option. But I’d prefer a more elegant solution, if possible.

The outputs should be also in memory: stdout = ‘done!’ and file2 = ‘alphanbetanonentwon’.

How do I prepare the buffers/streams/file descriptors such that they work? I need the Javascript program to work both on Linux and Windows.

The purpose of all this is is to check if a student wrote a Python program correctly, and to do it from Javascript, without touching the file system.

using socket.io and whenever a signal is received from the client and useeffect is invoked the first console log is ignored and only the second one runs

import { socket } from "../socket.js"

useEffect(()=>{
        console.log('effect ran')
        socket.on('turn',(data)=>{
            console.log('the data', data)
        }
},[socket])

i have simplified my code to see if this was all on my end but the first console log is still ignored

I have a list of 150 images called 0001.jpg, 0002.jpg … 0150.jpg.

This is what I’m doing so far (only included the relevant code):

import React, { useRef, useEffect, useState } from 'react';

function getCurrentFrame(index) {
  return `../${index.toString().padStart(4, "0")}.jpg`;
}

const ImageCanvas = ({ scrollHeight, numFrames, width, height }) => {
  const canvasRef = useRef(null);
  const [images, setImages] = useState([]);
  const [frameIndex, setFrameIndex] = useState(0);

  // Step 1: Load images
  function preloadImages() {
    for (let i = 1; i <= numFrames; i++) {
      const img = new Image();
      const imgSrc = getCurrentFrame(i);
      img.src = imgSrc;
      setImages((prevImages) => [...prevImages, img]);
    }
  }

    const render = () => {
      console.log(images[frameIndex]);
      context.drawImage(images[frameIndex], 0, 0);
      requestId = requestAnimationFrame(render);
    };

    render();

I get this error when it tries to drawImage:

“Uncaught DOMException: Failed to execute ‘drawImage’ on ‘CanvasRenderingContext2D’: The HTMLImageElement provided is in the ‘broken’ state.
at render”

console.log(images[frameIndex]); prints the correct element three to five times before showing the error:

<img src="../0001.jpg"> 

I’m certain the image source is correct because I set “img.src” in preloadImages() to the same src “../0001.jpg” and it shows the image.

Any idea what could be going wrong? Is there a better way to do it?

I am new to Javascript so maybe my question is common knowledge to some.
I think I did everything required to access PUBG api, but I am always getting error, response.ok is always false I think.
here is my code:

const apiKey = "key-example";
const apiUrl = "https://api.pubg.com/shards/steam"
fetch(apiUrl, {
  headers: {
    
    Authorization: `Bearer ${apiKey}`,
    Accept: "application/vnd.api+json",
  },
})
.then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json();
  })
  .then(protectedData => {
    // Process the protected data
    console.log('Protected Data:', protectedData);
  })
  .catch(error => {
    console.error('Error:', error);
  });

And I always get “Network response was not ok” error. I tried to put “Authorization” and “Accept” properties as string, but same thing. Is there something else I’m missing here? Thank you.

I dont know what to try anymore

I’m getting an error message when trying to add a new column to the end of my handsontable table

Error: Cannot create new column. When data source in an object, you can only have as much columns as defined in first data row, data schema or in the ‘columns’ setting.If you want to be able to add new columns, you have to use array datasource.

<!-- 
Error: Cannot create new column. When data source is an object, you can only have as many columns as defined in the first data row, data schema, or in the 'columns' setting. 
If you want to be able to add new columns, you have to use an array data source.
-->


<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/handsontable/dist/handsontable.full.min.css"
/>
<script src="https://cdn.jsdelivr.net/npm/handsontable/dist/handsontable.full.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/moment.min.js"></script>

<div class="mt-3">
  <h2 id="dadoslab">Laboratory Data</h2>
  <button type="button" class="m-3 btn btn-primary" id="add-test">Add test</button>
  <div class="container">
    <div id="exam-table-container"></div>
  </div>
  <button type="button" class="m-3 btn btn-primary" id="add-test-2">Add test</button>
  <input type="hidden" name="handsontable_data" id="handsontable_data">
</div>

<script>
    document.addEventListener("DOMContentLoaded", function() {
        const container = document.getElementById('exam-table-container');

        // Initial data definition as a two-dimensional array
        const data = [
            ['test Date'],
            ['test'],
            
        ];

        // Handsontable initialization
        const hot = new Handsontable(container, {
            data: data,
            colHeaders: function (colIndex) {
                if (colIndex === 0) {
                    return 'Exam'; // Header for the first column
                } 
                return `Exam ${colIndex}`; // Dynamic headers for other columns
            },
            columns: [
                { readOnly: true },
                { 
                    type: 'date',
                    dateFormat: 'DD/MM/YYYY',
                    correctFormat: true,
                    defaultDate: moment().format('DD/MM/YYYY'),
                    datePickerConfig: {
                        firstDay: 1, // Monday
                        showWeekNumber: true,
                        i18n: {
                            previousMonth: 'Previous month',
                            nextMonth: 'Next month',
                            months: ['January','February','March','April','May','June','July','August','September','October','November','December'],
                            weekdays: ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'],
                            weekdaysShort: ['Sun','Mon','Tue','Wed','Thu','Fri','Sat']
                        },
                        disableDayFn: function(date) {
                            return date.getDay() === 0 || date.getDay() === 6; // Disable Sunday and Saturday
                        }
                    }
                }
            ],
            cells: function(row, col) {
                var cellProperties = {};
                if (row === 0) {
                    cellProperties.type = 'date';
                } else {
                    cellProperties.type = 'text';
                }
                return cellProperties;
            },
            rowHeaders: true,
            stretchH: 'all',
            width: '100%',  
            height: 'auto', 
            contextMenu: true,
        });

        // Add a new column when the button is clicked
        document.getElementById('add-test').addEventListener('click', function() {
            hot.alter('insert_col_end');
        });

        document.getElementById('add-test-2').addEventListener('click', function() {
            hot.alter('insert_col_end');
        });
    });
</script>

https://codepen.io/ViniciusDevelopment/pen/qBzaqzm

https://jsfiddle.net/DevelopmentSagaz/mctf30jd/

so to make it short, I’m looping through all html tags using element.children to check some matched value and I noticed it’s not getting into the deepest nested html tags.

I have an element where its innerHTML has this value

**Copied version in the browser**
<div class="mt-3"><div class=""> hello <div class="custom-popover">17477778112</div></div></div>


**Formatted**
<div class="mt-3">
    <div class="">
        hello
        <div class="custom-popover">17477778112</div>
    </div>
</div>

when the looper reach to this certain element HTMLCollection [div.mt-3] and getting its children, it shows HTMLCollection [] and it has these attributes 0:div.custom-popover and length of 1

opening that 0 index in the console DevTools has a lot of values and etc, but when I access the element.children[0] in the code, it’s undefined.

element.childNodes returns this value NodeList [comment] -> 0: div length: 1, opening the 0: div and scrolling its innerHTML value has this innerHTML: " hello <div class="custom-popover">17477778112</div>"

not only that it also says childNodes: NodeList(2)
which contains 0: text and 1: div.custom-popover

BUT when I access it, it’s blank

element.childNodes[0] return this value <!---->

so I’m confused, and it all doesn’t make sense

I want to add zoom-in/zoom-out logic for my web camera, with this version it works only via input onChange, but I need to remove the input…do you have a suggestion on how can I make it without input? It doesn’t work not in useEffect and not even on button onClick.

 const handleZoomChange = useCallback(
            async (zoomValue: number) => {
                // @ts-ignore
                const video = ref.current;
                if (video && video.srcObject) {
                    const videoTracks = video.srcObject.getVideoTracks();
                    if (videoTracks.length > 0) {
                        const track = videoTracks[0];
                        const constraints = { advanced: [{ zoom: zoomValue }] };
                        try {
                            await track.applyConstraints(constraints);
                        } catch (error) {
                            console.error('Failed to apply constraints:', error);
                        }
                    }
                }
            },
            [ref]
        );
        const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
            const value = e.target.value;
            setInputZoom(value);
            if (value !== '') {
                const zoomValue = Math.max(1, Number(value));
                handleZoomChange(zoomValue);
            }
        };
                         <input
                            type="number"
                            min={1}
                            value={inputZoom}
                            onChange={handleInputChange}
                        />

LOG VirtualizedList: You have a large list that is slow to update – make sure your renderItem function renders components that follow React performance best practices like PureComponent, shouldComponentUpdate, etc. {“contentLength”: 3236.363525390625, “dt”: 966, “prevDt”: 863}

Code used is given below, there is no Error in code but why that Log for VirtualizedList :-

return (
    <View style={ styles.container }>
      <JobSearchBar searchQuery={ searchQuery } setSearchQuery={ setSearchQuery } />
      <FlatList
        data={ filteredJobs }
        renderItem={ ( { item } ) => <JobCard job={ item } /> }
        ListHeaderComponent={ <Seperator /> }
        keyExtractor={ ( item ) => item.id.toString() }
        ItemSeparatorComponent={ <Seperator size={ 0.04 } /> }
        onEndReached={ hasNextPage && fetchNextPage }
        onEndReachedThreshold={ 0.5 }
        ListEmptyComponent={ isLoading && <Spinner /> }
        ListFooterComponent={ isFetchingNextPage ? <Spinner style={ { marginVertical: width * 0.05 } } /> : <Seperator size={ 0.055 } /> }
      />
    </View>
  );

import { useInfiniteQuery } from '@tanstack/react-query';
import api from '../utils/apiService';


const fetchJobs = async ( { pageParam = 1 } ) => {
  const res = await api.get( `/common/jobs?page=${ pageParam }` );
  return res.data;
};

export const useJobsQuery = () => {
  return useInfiniteQuery( {
    queryKey: ['jobs'],
    queryFn: fetchJobs,
    getNextPageParam: ( lastPage, pages ) => {
      if ( lastPage.results.length ) {
        return pages.length + 1;
      } else {
        return undefined;
      }
    },
  } );
};

const JobCard = ( { job } ) => {
  const router = useRouter();
  const dispatch = useDispatch();
  const bookmarks = useSelector( ( state ) => state.bookmarks.bookmarkedJobs );
  const isBookmarked = bookmarks.includes( job.id );

  /* ...handler functions */

  return (
    <TouchableOpacity activeOpacity={ 0.7 } onPress={ handleNavigation } style={ styles.card }>
      <View style={ styles.cardContent }>
        <Text numberOfLines={ 2 } style={ styles.title }>{ job.title }</Text>
        <Divider style={ { flex: 1, justifyContent: 'center' } } />

        <View style={ styles.flexCenter }>
          <Icon name='map-marker-outline' type='material-community' size={ IconFonts.sm } color={ Colors.light.tabIconDefault } />
          <Text style={ styles.details }>{ job.primary_details.Place }</Text>
        </View>

        <View style={ styles.flexCenter }>
          <Icon name='currency-inr' type='material-community' size={ IconFonts.sm } color={ Colors.light.tabIconDefault } />
          <Text style={ styles.details }>{ job.primary_details.Salary.length < 2 ? 'N/A' : job.primary_details.Salary?.replace( /₹/g, '' ) }</Text>
        </View>

        <View style={ styles.contactInfo }>
          <TouchableOpacity onPress={ handleWhatsAppNavigation } style={ styles.flexCenter }>
            <Icon name='whatsapp' type='material-community' size={ IconFonts.sm } color='#25D366' />
            <Text style={ styles.contactLink } onPress={ handleWhatsAppNavigation }>
              WhatsApp
            </Text>
          </TouchableOpacity>

          <TouchableOpacity onPress={ handleContactNavigation } style={ styles.flexCenter }>
            <Icon name='phone' type='material-community' size={ IconFonts.sm } color='#007AFF' />
            <Text style={ styles.contactLink } onPress={ handleContactNavigation }>
              { job?.custom_link?.replace( 'tel:', '' ) }
            </Text>
          </TouchableOpacity>

          {/* Bookmark Icon */ }
          <TouchableOpacity onPress={ handleBookmarkToggle }>
            <Icon name={ isBookmarked ? 'bookmark' : 'bookmark-outline' } type='material-community' color={ isBookmarked ? '#ffc100' : Colors.light.icon } size={ IconFonts.lg } />
          </TouchableOpacity>

        </View>
      </View>
    </TouchableOpacity>
  );
};

const styles = StyleSheet.create( {...} );

export default React.memo( JobCard );

I have shared the code above which I wrote and tried! But I don’t know how to remove that! May be trying some other library like FlashList, or FlatList itself but with some more props for improving performance!?