CODEWITHSUNDEEP
javascriptreactjs
user13002098
user13002098

Reputation:

React- what is the best way for writing functions for best performance

Let's say there is react app with search system. You can input text to search for title/name, there is some list group to search only having some category, and at bottom you have pagination component to go to other pages if searched amount is bigger than limit for page. I made some apps like this here is example of the state one I made last time

constructor(props) {
    super(props);
    this.state = {
      dataProjectTags: [],      //fetched data containing categories
      dataProjectsList: [],     //fetched data containing searching stuff
      inputText: "",            //what user types in search box
      tags: [],                 // categories user selected
      pagesTotal: 0,            // the amount of total pages needed for the search result
      pageActive: 0,            // page number which user is on at the moment 
      projectsToDisplay: [],    //search result
      projectsToDisplayForPage: [], // what to render from search result for current page
    };

Here are 2 methods I used to code it

  1. If user selects category, inputs new text or changes page set state only for that event. After that in render method make all the variables to calculate what should be rendered right now.

  2. If user selects category, inputs new text or changes page make all the calculations and set all neccessary states. After that in render there are no calculations just using 1 state property to render stuff

To be clear the example state I posted is from last app using method nr 2. If this was nr 1 there wouldn't be states like "projectsToDisplay" and "projectsToDisplayForPage" because I would calculate them in render. So in big shortcut method 1 sets only 1 state at time but is calling methods in render method and calculating stuff, method 2 sets many states at time but thanks to that everything is calculated and there is nothing called or calculated at render. Which one is a better practice and faster?

Upvotes: 0

Views: 120

Answers (1)

Chris
Chris

Reputation: 59541

Regarding performance, both methods are a valid. I don't think one or the other would be performing better than the other, as long as you can prevent unnecessary recalculations during re-renders. But even then, how costly are those calculations anyway? Probably negligible.

Looking at your state, some state variables cannot or at least should not, exist elsewhere or in another form. For example, inputText, tags and the states containing fetched data.

Regarding states like pagesTotal, projectsToDisplay and projectsToDisplayForPage - those can be handled either using method 1 or method 2, as you described. Both are perfectly valid.

Personally? I usually use array methods such as filter in the render method to display only relevant data (here, perhaps the data that maches the selected tags or user search). You can also use slice and similar functions to display a subset of your array.

However, if your dataset is very large, constantly filtering and conditionally operating on your data can cause "lag" and can impact UX. In such cases, it can be a good idea to figure out the relevant data outside the render function and being smart about when to actually trigger a re-render. Perhaps with a throttling or debouncing function to limit the amount of re-renders (for example, to re-render only after a user has stopped typing in the search input after X seconds, and not after each keystroke).

Upvotes: 0

Related Questions