Big perfomance issue (re-rendering) #4057
Description
The issue described in #3219 exists.
Swagger-UI version: 3.8.0
Swagger version: 2.0
It can be reproduced with big swagger.json file.
In my project I have about 150 API functions and 185 definitions.
When I type something in input fields, there is a big performance issue.
Here is what I found:
Each time you press any key when editing input field, it causes re-render of the whole application. If you have a lot of functions/definitions, React needs to re-render them all, it is a rather slow operation.
How to check it out:
I can provide a swagger.json file with 1 API function and 100 definitions (Or you can create it by yourselves, just duplicate any definition 100 times). If you load this json file to swagger UI, you will see how slowly editing works. Then add this plugin:
const MyModels = function(system) {
return {
wrapComponents: {
Models: (Original, system) => (props) => {
console.log('render');
return null;
}
}
}
};
SwaggerUI({
dom_id: '#app',
url: 'swagger.json',
plugins: [MyModels]
});
This plugin returns null instead of rendering huge Models (definitions) section.
After that swagger UI starts to work much faster.
Click "Try it out" and press any key in any input field. In console you will see "render" word from our MyModels plugin. So it means, that when you editing a parameter, it causes re-render Models section (and other parts of application).
You need to avoid such behavior.