--- title: "Setting Cookies in React | Netlify" description: "Realize the speed, agility and performance of a scalable, composable web architecture with Netlify. Explore the composable web platform now!" source: "https://www.netlify.com/blog/2017/01/19/setting-cookies-in-react/" last_updated: "2026-07-14T09:51:15.000Z" --- On first login to Netlify we present you with a wonderful onboarding modal explaining briefly what we are all about. ![website screenshot](/v3/img/blog/welcome-carousel.png) I was given the task to only present this modal to the new users, but not to existing users. My first thought was to add a check to see if a user has exactly 1 site deployed to Netlify, then this onboard modal. This was not a great solution due to most new users onboarding with Netlify via our [Sign Up](https://app.netlify.com/signup) flow and that coaches the user through a path to deployment of your first site, which is the real purpose of the modal — to provide next steps after your first deploy to Netlify. This also does not prevent the modal from appearing on future logins as well. From some quick Googling, I found that I could set a cookie to solve my problem. I was previously aware of cookies and how they are used, but can say throughout my development career, I have not actually needed to set one in a project for any reason yet. I did stumble on this, at the time, unanswered [stackoverflow question](http://stackoverflow.com/questions/39826992/how-can-i-do-to-set-cookie-in-the-react-code), and took note of the complexity in the approach. I then found the [react-cookie](https://github.com/thereactivestack/react-cookie) library that does a great job astracting access to cookies from the document with approachable functions and options. After a quick read through the [README](https://github.com/thereactivestack/react-cookie/blob/master/README.md), I was sold and stared using it. ``` import cookie from "react-cookie"; class Dashboard extends Component { constructor(props) { super(props); this.state = {onboarded: cookie.load("onboarded")}; } handleOnboardFlag = () => { cookie.save("onboarded", true, {path: "/"}); }; ...} ``` I setup the Component’s state based on the existence of the onboarded cookie I created. I then went one step further and wanted to exclude any users that might have been with Netlify long enough to know its features and not need our new onboarding carousel. I have access to the database that backs the Netlify JAMstack app, but trying to stay true to the frontend I opted to only solve this on the client. Next I created an additional check that limits the onboarding check for users who login is the same as their account creation date. This prevents experienced users from seeing the onboarding window, but only checks whether new users have been onboarded that same day they signed up. I also used [moment](http://momentjs.com/)’s diff function to identify if the user sign up less than a day ago and compare that to onboarded cookie. The boolean return will trigger the the onboard modal and set the cookie to true when dismissed. ``` render() { const {user} = this.props; const discoveryPhase = moment(user.get("last_login")).diff(user.get("created_at")); const isNewUser = !this.state.onboarded && moment.duration(discoveryPhase).asDays() < 1; return ( );} ``` Now the result was rather quick, but the path to get here was met with a bit of discovery. Thanks to React I can get an app to production rather quickly and because of this I can focus on more elegant solutions for common problems on the web, like 🍪s. ### Share - [X (fka Twitter)](https://twitter.com/intent/tweet?text=Setting Cookies in React&url=https://www.netlify.com/blog/2017/01/19/setting-cookies-in-react//) - [LinkedIn](https://www.linkedin.com/shareArticle?mini=true&url=https%3A%2F%2Fwww.netlify.com%2Fblog%2F2017%2F01%2F19%2Fsetting-cookies-in-react%2F%2F) - [Facebook](https://www.facebook.com/sharer.php?u=https://www.netlify.com/blog/2017/01/19/setting-cookies-in-react//) - [Bluesky](https://bsky.app/intent/compose?text=Setting Cookies in React+https://www.netlify.com/blog/2017/01/19/setting-cookies-in-react//) * * * ### Tags - [popular](/blog/tags/popular/) - [React](/blog/tags/react/) ## Keep reading ![](/_astro/3f45eb6eda4ea8814be310e3df4a7883a5bd9ba0-1200x675_ZcBDUS.webp) Guides & Tutorials May 15, 2026 [ ### How to build a real-time AI chatbot in minutes with Netlify Agent Runners (no backend) ](/blog/how-to-build-a-real-time-ai-chatbot-in-minutes-with-netlify-agent-runners-no-backend) - ![Profile picture of Nahrin Jalal](/_astro/f0e7c8f227a03fe58340c99ef5439d5a896c0733-272x272_Z23kDpD.webp) Nahrin Jalal ![](/_astro/8fe9e8a23f944c9912003233d99a2df7fee637cf-1600x900_Z1gMhmf.webp) Guides & Tutorials May 15, 2026 [ ### Tracking AI search traffic: how to use Netlify Log Drains to maximize AEO ](/blog/tracking-ai-search-traffic) - ![Profile picture of Nahrin Jalal](/_astro/f0e7c8f227a03fe58340c99ef5439d5a896c0733-272x272_Z23kDpD.webp) Nahrin Jalal ## Recent posts News & Announcements July 13, 2026 [ ### Netlify inside of Claude Design ](/blog/netlify-inside-of-claude-design) - ![Profile picture of Sean Roberts](/_astro/bbf2243f8171dbddd80ab2103622106cef84d125-512x512_Z1d2LKE.webp) Sean Roberts News & Announcements June 25, 2026 [ ### Netlify Functions, designed for Agent Experience ](/blog/netlify-functions-designed-for-agent-experience) - ![Profile picture of Eduardo Bouças](/_astro/52958f21e8450baf6d8e60302341a984e220c0cd-512x512_13VDlu.webp) Eduardo Bouças News & Announcements June 24, 2026 [ ### How we measure Netlify’s Agent Experience ](/blog/how-we-measure-netlify-agent-experience) - ![Profile picture of Sean Roberts](/_astro/bbf2243f8171dbddd80ab2103622106cef84d125-512x512_Z1d2LKE.webp) Sean Roberts ![](/_astro/3f255b372fa958df35802666ee33b4609b2d71bd-1200x1586_1VtE2D.webp) ### How do the best dev and marketing teams work together? [Access the report](https://www.netlify.com/reports/2024-leadership-trend-report/access/)