react-alicante-2023-paulina-chojnowska.pdf

I'mPaulina🙋🏼‍♀️
TeamLeadatOdrabiamy.pl

Ever
received
codereview?
🤕

Wearedevelopers!
Focus
Softskills

Wearedevelopers!
Focus
Softskills
Unrewarding?

📝
Show the banner only if user
hasn't seen it yet

import { useCookies, CookiesProvider } from "react-cookie";
import Banner from "./Banner";
export default function WelcomePage() {
const [cookies, setCookie] = useCookies(["banner-seen"]);
const handleBannerClose = () => {
setCookie("banner-seen", true);
};
return (
<CookiesProvider>
<main>
{!cookies["banner-seen"] && <Banner onClose={handleBannerClose} />}
<div>Welcome to Alicante!</div>
</main>
</CookiesProvider>
);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

};
return (
<CookiesProvider>
<main>
</main>
</CookiesProvider>
);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<CookiesProvider>
</CookiesProvider>
1
2
3
4
5
6
7
8
};
9
10
return (
11
12
<main>
13
14
15
</main>
16
17
);
18
}
19

};
return (
<CookiesProvider>
<main>
</main>
</CookiesProvider>
);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<CookiesProvider>
</CookiesProvider>
1
2
3
4
5
6
7
8
};
9
10
return (
11
12
<main>
13
14
15
</main>
16
17
);
18
}
19
1
2
3
4
5
6
7
8
};
9
10
return (
11
<CookiesProvider>
12
<main>
13
14
15
</main>
16
</CookiesProvider>
17
);
18
}
19

};
return (
<CookiesProvider>
<main>
</main>
</CookiesProvider>
);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<CookiesProvider>
</CookiesProvider>
1
2
3
4
5
6
7
8
};
9
10
return (
11
12
<main>
13
14
15
</main>
16
17
);
18
}
19
1
2
3
4
5
6
7
8
};
9
10
return (
11
<CookiesProvider>
12
<main>
13
14
15
</main>
16
</CookiesProvider>
17
);
18
}
19
};
1
2
3
4
5
6
7
8
9
10
return (
11
<CookiesProvider>
12
<main>
13
14
15
</main>
16
</CookiesProvider>
17
);
18
}
19

It would be better to use storage instead of
cookies. You don't need the info on the server.

Use camelCase for the cookie
naming, ok?

Are you serious with
keeping this in the
cookies?!

Do you even imagine the
impact the context has
on the app? 🤦

import { useState } from "react";
const [bannerSeen, setBannerSeen] = useState(
JSON.parse(localStorage.getItem("bannerSeen") ?? "false")
);
setBannerSeen(true);
localStorage.setItem("bannerSeen", "true");
};
return (
<main>
{!bannerSeen && <Banner onClose={handleBannerClose} />}
</main>
);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

);
};
return (
<main>
</main>
);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
);
};
1
2
3
4
5
6
7
8
9
10
11
12
13
return (
14
<main>
15
16
17
</main>
18
);
19
}
20

You probably don't know about more advanced concepts
like the new React hook that you could use -
useSyncExternalStore.

import { useSyncExternalStore } from "react";
const subscribeToLocalStorage = (callback: () => void) => {
window.addEventListener("storage", callback);
return () => {
window.removeEventListener("storage", callback);
};
};
const getLocalStorageSnapshot = () => localStorage.getItem("bannerSeen");
const bannerSeen = useSyncExternalStore(
subscribeToLocalStorage,
getLocalStorageSnapshot
);
};
return (
<main>
{bannerSeen !== "true" && <Banner onClose={handleBannerClose} />}
</main>
);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

return () => {
};
};
);
};
return (
<main>
</main>
);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
);
1
2
3
4
5
return () => {
6
7
};
8
};
9
10
11
12
13
14
15
16
17
18
19
20
};
21
22
return (
23
<main>
24
25
26
</main>
27
);
28
}
29

The hook is especially useful when you want to subscribe
to some external store changes.

Also, storage event does not fire when changes to the storage
are made on the same page, so you would still need state.

Wow! I thought React 18 was like Nessie - everyone talks
about it, but no one has seen it!

Just remember to still update state when user
closes the banner.

Motivation
Negative Neutral Positive

Codeprotection
Revenge
Showingoff

Codeprotection
Revenge
Showingoff
Duty

Codeprotection
Revenge
Showingoff
Duty Knowledge
sharing
Personalgrowth
Empathy
Fun

Memes
Jokes
Senseofhumour
Propercodereview

Doesitdothework?
Withoutbreakinganything...

react-alicante-2023-paulina-chojnowska.pdf

react-alicante-2023-paulina-chojnowska.pdf

Recommended

Recommended

More Related Content

Similar to react-alicante-2023-paulina-chojnowska.pdf

Similar to react-alicante-2023-paulina-chojnowska.pdf (20)

Recently uploaded

Recently uploaded (20)

react-alicante-2023-paulina-chojnowska.pdf