9 setTimeout(() => setLoading(false), 1500);
10 }, []);
11 return (
12 <>13 {loading ? (14 <Flex15 alignItems="center"16 justifyContent="center"17 minH="100vh"18 textAlign="center"19 >20 <Spinner color="body" bgColor="bg" verticalAlign="middle" size="xl" />21 </Flex>22 ) : (23 props.children24 )}25 </>26 );
27};
28
17 setLoggedIn(false);
18 navigate("/");
19 }, [cookies, navigate]);
20 return <>{loggedIn && props.children}</>;21};
22
23export default AuthProvider;
Fragments are a syntax that allow you to build a react component with multiple nodes or subcomponents, without requiring a wrapper element.
A fragment is considered to be redundant if:
Removing the fragments can fix this issue.
// Example 1
<>{foo}</>
// Example 2
<><Foo /></>
// Example 3
<p><>foo</></p>
// Example 4
<></>
// Example 5
<Fragment>foo</Fragment>
// Example 6
<React.Fragment>foo</React.Fragment>
// Example 7
<section>
<>
<div />
<div />
</>
</section>
// Example 1
<>
<Foo />
<Bar />
</>
// Example 2
<>foo {bar}</>
// Example 3
<> {foo}</>
// Example 4
const cat = <>meow</>
// Example 5
<SomeComponent>
<>
<div />
<div />
</>
</SomeComponent>
// Example 6
<Fragment key={item.id}>{item.value}</Fragment>