5 ms·
protip: you can use an IIFE (immediately invoked function expression) to put whatever conditionals or logic you want inside JSX! I use this all the time and it'
by beaconstudios 5y ago
protip: you can use an IIFE (immediately invoked function expression) to put whatever conditionals or logic you want inside JSX! I use this all the time and it's much nicer for more complex blocks:
{(() => {
switch(state) {
case 'loading': return <Loading />;
case 'ready': return <Component />;
case 'error': return <Error error={error} />;
}
})()}
- deleted 5y ago[deleted]
- deleted 5y ago[deleted]
- bacro 5y agoWaste of memory by creating new function objects on each render.
- symlinkk 5y agoYeah probably best to move this to a function outside the render loop with useCallback
- beaconstudios 5y agoMicro-optimisations aren't useful. If you get to the point where the performance cost of inline functions is a bottleneck, you probably shouldn't be using React at all.
- bacro 5y agoMaybe, but I just prefer to have a named function defined with a useCallback and just call it.
- beaconstudios 5y agoThat's fine, but that's more of a stylistic preference than a performance concern.
- erikpukinskis 5y agoWon’t V8 just optimize this anyway? I doubt there’s any real difference in memory usage.
- bacro 5y agoI am not sure, it has a closure for the 'error' local variable.
- masterofmisc 5y agoOh, I like this. Thanks.