2 ms·

One of the older posts eloquently discusses why "accidentally quadratic" behavior is both so recurring and so insidious: http://accidentallyquadratic.tumblr.com

by emfree 10y ago

One of the older posts eloquently discusses why "accidentally quadratic" behavior is both so recurring and so insidious: http://accidentallyquadratic.tumblr.com/post/113840433022/why-accidentally-quadratic http://accidentallyquadratic.tumblr.com/post/113840433022/wh...

vanderZwan 10y ago
Raise your hand if you have not only written accidentally quadratic code, but managed to compose said code in such a way that you ended up with something even worse! raises hand Imagine you have a React SPA where users can select a number of items for which they want more information (I can't give more details at this moment). Said information has to be fetched from the server upon selection. I recently discovered that the website would fetch all selected items whenever a new item was selected, including previously selected items, regardless of whether it had already been fetched. So if I start with one selection and build up to n, that is 1 + 2 + .. + n-1 + n = (n²+n)/2[0]. Whoops. To make it worse, I had also somehow had managed to set up my components in such a way that for each fetch being received, React would remount (that's right, re-mount) all of the selected items. Don't ask me how. I'll just say have only been doing web stuff since last year and leave it at that. If we assume a user clicks fast enough to select every item before the fetches are received, that would be the previous equation multiplied by n selections, so.. (n³+n²)/2. Yikes! So yeah... that was stupidly slow. Here's what I did to fix it; obvious but worth spelling out: - only fetch what hasn't been/isn't being fetched - only re-render the component that was updated - don't immediately do the above when the user selects an item; let them make a selection first, then click a "show information" button, then fetch all the needed information in a *single* fetch and render it in a *single* update to the components. [0] https://www.wolframalpha.com/input/?i=sum+one+to+n https://www.wolframalpha.com/input/?i=sum+one+to+n

by emfree 10y ago

vanderZwan 10y ago

Raise your hand if you have not only written accidentally quadratic code, but managed to compose said code in such a way that you ended up with something even worse! raises hand Imagine you have a React SPA where users can select a number of items for which they want more information (I can't give more details at this moment). Said information has to be fetched from the server upon selection. I recently discovered that the website would fetch all selected items whenever a new item was selected, including previously selected items, regardless of whether it had already been fetched. So if I start with one selection and build up to n, that is 1 + 2 + .. + n-1 + n = (n²+n)/2[0]. Whoops. To make it worse, I had also somehow had managed to set up my components in such a way that for each fetch being received, React would remount (that's right, re-mount) all of the selected items. Don't ask me how. I'll just say have only been doing web stuff since last year and leave it at that. If we assume a user clicks fast enough to select every item before the fetches are received, that would be the previous equation multiplied by n selections, so.. (n³+n²)/2. Yikes! So yeah... that was stupidly slow. Here's what I did to fix it; obvious but worth spelling out: - only fetch what hasn't been/isn't being fetched - only re-render the component that was updated - don't immediately do the above when the user selects an item; let them make a selection first, then click a "show information" button, then fetch all the needed information in a *single* fetch and render it in a *single* update to the components. [0] https://www.wolframalpha.com/input/?i=sum+one+to+n https://www.wolframalpha.com/input/?i=sum+one+to+n