ReactJS - Add 10,000 nodes & select options
-
I've been learning React. It's quite amazing actually. I wanted to know what the impact of my simple Project* object would be if there were a lot of them. Questions I Had 1. What If I Added 10,000 div nodes to my page? 2. What if I added 10,000 choices to a drop list (html select tag - option values)? 2a. Additionally, what if I added each Project object (serialized to string) as the value on the select tag option? It performs amazingly well. Bonus Info Here's how you add a value to a drop list (select tag) in HTML / JavaScript:
// get reference to the drop list
let projectList = document.querySelector("#projectList");
// Append a new Option to the drop list - p.name is the text you'll see
// value (string) is the value returned when item is selected.
projectList.append(new Option(p.name, value, false, false));Add Object As Value But, if you're an OOP person and you want to use a specific object whenever an item is selected int he drop list then you want to store the object as the value. That way, when the user selects the item you have the original object. Since value expects a string you will need to do this:
projectList.append(new Option(p.name, JSON.stringify(p), false, false));
Now when the user selects an item in the drop list you simply parse the thing back to your target object. The changehandler is my method which is fired when user selects a new value from drop list.
changeHandler(e) {
// changehandler receives event object which contains target (drop list item selected)
// item's properties will match a Project
let item = JSON.parse(e.target.value);
console.log(`item.name: ${item.name}`); // original Name of the Project
}But How Does It Perform With 10,000 Serialized Objects? It's amazing. Takes < 1 second for drop list to respond. Pics or it didn't happen. :rolleyes: See snapshot here[^]. *Project Class
export class Project {
constructor(name) {
this.id = uuidv4();
this.ownerId = localUser;
this.name = name || '';
this.created = new Date();
}
}File it under weird, but it is also quite wonderful. :laugh:
-
I've been learning React. It's quite amazing actually. I wanted to know what the impact of my simple Project* object would be if there were a lot of them. Questions I Had 1. What If I Added 10,000 div nodes to my page? 2. What if I added 10,000 choices to a drop list (html select tag - option values)? 2a. Additionally, what if I added each Project object (serialized to string) as the value on the select tag option? It performs amazingly well. Bonus Info Here's how you add a value to a drop list (select tag) in HTML / JavaScript:
// get reference to the drop list
let projectList = document.querySelector("#projectList");
// Append a new Option to the drop list - p.name is the text you'll see
// value (string) is the value returned when item is selected.
projectList.append(new Option(p.name, value, false, false));Add Object As Value But, if you're an OOP person and you want to use a specific object whenever an item is selected int he drop list then you want to store the object as the value. That way, when the user selects the item you have the original object. Since value expects a string you will need to do this:
projectList.append(new Option(p.name, JSON.stringify(p), false, false));
Now when the user selects an item in the drop list you simply parse the thing back to your target object. The changehandler is my method which is fired when user selects a new value from drop list.
changeHandler(e) {
// changehandler receives event object which contains target (drop list item selected)
// item's properties will match a Project
let item = JSON.parse(e.target.value);
console.log(`item.name: ${item.name}`); // original Name of the Project
}But How Does It Perform With 10,000 Serialized Objects? It's amazing. Takes < 1 second for drop list to respond. Pics or it didn't happen. :rolleyes: See snapshot here[^]. *Project Class
export class Project {
constructor(name) {
this.id = uuidv4();
this.ownerId = localUser;
this.name = name || '';
this.created = new Date();
}
}File it under weird, but it is also quite wonderful. :laugh:
But as we keep telling people in QA, a list of 10_000 items isn't much use to the user. :) Until we get proper support for the selectmenu[^] element, you'd probably want to use a plugin like Select2[^] to add a search to your list. But at that point, you might be better to use something closer to an "auto-complete" approach, and load the matching items on demand.
"These people looked deep within my soul and assigned me a number based on the order in which I joined." - Homer
-
I've been learning React. It's quite amazing actually. I wanted to know what the impact of my simple Project* object would be if there were a lot of them. Questions I Had 1. What If I Added 10,000 div nodes to my page? 2. What if I added 10,000 choices to a drop list (html select tag - option values)? 2a. Additionally, what if I added each Project object (serialized to string) as the value on the select tag option? It performs amazingly well. Bonus Info Here's how you add a value to a drop list (select tag) in HTML / JavaScript:
// get reference to the drop list
let projectList = document.querySelector("#projectList");
// Append a new Option to the drop list - p.name is the text you'll see
// value (string) is the value returned when item is selected.
projectList.append(new Option(p.name, value, false, false));Add Object As Value But, if you're an OOP person and you want to use a specific object whenever an item is selected int he drop list then you want to store the object as the value. That way, when the user selects the item you have the original object. Since value expects a string you will need to do this:
projectList.append(new Option(p.name, JSON.stringify(p), false, false));
Now when the user selects an item in the drop list you simply parse the thing back to your target object. The changehandler is my method which is fired when user selects a new value from drop list.
changeHandler(e) {
// changehandler receives event object which contains target (drop list item selected)
// item's properties will match a Project
let item = JSON.parse(e.target.value);
console.log(`item.name: ${item.name}`); // original Name of the Project
}But How Does It Perform With 10,000 Serialized Objects? It's amazing. Takes < 1 second for drop list to respond. Pics or it didn't happen. :rolleyes: See snapshot here[^]. *Project Class
export class Project {
constructor(name) {
this.id = uuidv4();
this.ownerId = localUser;
this.name = name || '';
this.created = new Date();
}
}File it under weird, but it is also quite wonderful. :laugh:
I would suggest if you are liking React - make use of: TypeScript - it's Javascript with strong typing and makes Javasript so much better to work with. Redux - well worth doing the main Redux tutorial first and consider using it as it makes handling state much easier.
“That which can be asserted without evidence, can be dismissed without evidence.”
― Christopher Hitchens
-
But as we keep telling people in QA, a list of 10_000 items isn't much use to the user. :) Until we get proper support for the selectmenu[^] element, you'd probably want to use a plugin like Select2[^] to add a search to your list. But at that point, you might be better to use something closer to an "auto-complete" approach, and load the matching items on demand.
"These people looked deep within my soul and assigned me a number based on the order in which I joined." - Homer
-
I would suggest if you are liking React - make use of: TypeScript - it's Javascript with strong typing and makes Javasript so much better to work with. Redux - well worth doing the main Redux tutorial first and consider using it as it makes handling state much easier.
“That which can be asserted without evidence, can be dismissed without evidence.”
― Christopher Hitchens
-
I've been learning React. It's quite amazing actually. I wanted to know what the impact of my simple Project* object would be if there were a lot of them. Questions I Had 1. What If I Added 10,000 div nodes to my page? 2. What if I added 10,000 choices to a drop list (html select tag - option values)? 2a. Additionally, what if I added each Project object (serialized to string) as the value on the select tag option? It performs amazingly well. Bonus Info Here's how you add a value to a drop list (select tag) in HTML / JavaScript:
// get reference to the drop list
let projectList = document.querySelector("#projectList");
// Append a new Option to the drop list - p.name is the text you'll see
// value (string) is the value returned when item is selected.
projectList.append(new Option(p.name, value, false, false));Add Object As Value But, if you're an OOP person and you want to use a specific object whenever an item is selected int he drop list then you want to store the object as the value. That way, when the user selects the item you have the original object. Since value expects a string you will need to do this:
projectList.append(new Option(p.name, JSON.stringify(p), false, false));
Now when the user selects an item in the drop list you simply parse the thing back to your target object. The changehandler is my method which is fired when user selects a new value from drop list.
changeHandler(e) {
// changehandler receives event object which contains target (drop list item selected)
// item's properties will match a Project
let item = JSON.parse(e.target.value);
console.log(`item.name: ${item.name}`); // original Name of the Project
}But How Does It Perform With 10,000 Serialized Objects? It's amazing. Takes < 1 second for drop list to respond. Pics or it didn't happen. :rolleyes: See snapshot here[^]. *Project Class
export class Project {
constructor(name) {
this.id = uuidv4();
this.ownerId = localUser;
this.name = name || '';
this.created = new Date();
}
}File it under weird, but it is also quite wonderful. :laugh:
Need a recommendation from you. Am planning to write a 3D game in JavaScript, a small hobby project, which uses Three.js library. Is it better written in ReactJS (which I have to still learn), or in plain Vanilla JS? What would you recommend?
-
Need a recommendation from you. Am planning to write a 3D game in JavaScript, a small hobby project, which uses Three.js library. Is it better written in ReactJS (which I have to still learn), or in plain Vanilla JS? What would you recommend?
If you're basically using HTML5 CANVAS which you probably are, then I would most likely go with vanilla JS. React basically gives you a way to manipulate the HTML DOM that is fast and easily updateable. But if you're not using much DOM because your game runs in the Canvas then you really won't get much out of React anyways. Also, if you are going to have a Canvas area and then DOM elements surrounding it you can even add React later to manipulate those DOM elements so you won't have to begin with React anyways and it will be easy to later incorporate React. That's actually one of the really nice things of the React framework. Hope this helps. Good luck! :thumbsup:
-
If you're basically using HTML5 CANVAS which you probably are, then I would most likely go with vanilla JS. React basically gives you a way to manipulate the HTML DOM that is fast and easily updateable. But if you're not using much DOM because your game runs in the Canvas then you really won't get much out of React anyways. Also, if you are going to have a Canvas area and then DOM elements surrounding it you can even add React later to manipulate those DOM elements so you won't have to begin with React anyways and it will be easy to later incorporate React. That's actually one of the really nice things of the React framework. Hope this helps. Good luck! :thumbsup:
Thanks a lot. My app will have one big screen-wide canvas (except for a small controls area). I will go with plain Vanilla JS to start with.
-
I've been learning React. It's quite amazing actually. I wanted to know what the impact of my simple Project* object would be if there were a lot of them. Questions I Had 1. What If I Added 10,000 div nodes to my page? 2. What if I added 10,000 choices to a drop list (html select tag - option values)? 2a. Additionally, what if I added each Project object (serialized to string) as the value on the select tag option? It performs amazingly well. Bonus Info Here's how you add a value to a drop list (select tag) in HTML / JavaScript:
// get reference to the drop list
let projectList = document.querySelector("#projectList");
// Append a new Option to the drop list - p.name is the text you'll see
// value (string) is the value returned when item is selected.
projectList.append(new Option(p.name, value, false, false));Add Object As Value But, if you're an OOP person and you want to use a specific object whenever an item is selected int he drop list then you want to store the object as the value. That way, when the user selects the item you have the original object. Since value expects a string you will need to do this:
projectList.append(new Option(p.name, JSON.stringify(p), false, false));
Now when the user selects an item in the drop list you simply parse the thing back to your target object. The changehandler is my method which is fired when user selects a new value from drop list.
changeHandler(e) {
// changehandler receives event object which contains target (drop list item selected)
// item's properties will match a Project
let item = JSON.parse(e.target.value);
console.log(`item.name: ${item.name}`); // original Name of the Project
}But How Does It Perform With 10,000 Serialized Objects? It's amazing. Takes < 1 second for drop list to respond. Pics or it didn't happen. :rolleyes: See snapshot here[^]. *Project Class
export class Project {
constructor(name) {
this.id = uuidv4();
this.ownerId = localUser;
this.name = name || '';
this.created = new Date();
}
}File it under weird, but it is also quite wonderful. :laugh:
raddevus wrote:
What if I added 10,000 choices to a drop list
Myself I would tag that as a bad UX design. As a back end developer who was requested to populate it I would refuse to do it without paging. Since I know that if there are 10,000 now then there are going to be 100,000 next year. And when that blows up I can't point to the UI as the problem.
