How To Update A Cookie With React

Ready Cookies in React

Created: April-21, 2022

Cookies in React
Structure of Cookies in React
Set Cookies in React

React developers aim to improve user experience by improving the efficiency and speed of the applications. Sometimes, cookies tin can be used to great effect and ensure a good feel for your users.

This commodity will demonstrate how to set up cookies in React.

Cookies in React

Cookies are bits of HTTP code that tin can help you manage how to shop bits of data on the server, and so information technology will be automatically available the next time users visit your website.

For example, this information can be the username, email, user's shopping cart, or browsing history. Cookies tin can help users resume their previous session seamlessly.

React is used to build single-page applications. The information is not loaded from the server, then we need to implement a custom approach to storing cookies in React.

Since we're dealing with a JavaScript-based framework, we will use the document web interface natively available in JavaScript.

Structure of Cookies in React

Cookies are ordinarily structured every bit proper noun-value pairs. For example, this is a cookie to remember the user'southward login until the next session:

              certificate.cookie = `login=sample@gmail.com`

As you lot can see, we used the cookie property of the document interface and set up it equal to the proper name-value pair.

A cookie can include other details, such as when it should expire. If a parameter is not specified, a cookie will exist deleted once the users have closed their browser.

If you intend to set multiple name-value pairs of cookies in JavaScript, split them with semicolons, like this:

              document.cookie = `name=value; expires=expirationTime; path=domainPath`

Gear up Cookies in React

Permit's look at a applied example. Here, we have a elementary App component in React.

              export default office App() {     const handleClick = () => {         certificate.cookie = "username=admin";         console.log(document.cookie);     };     return (         <div className="App">             <h1>Hullo CodeSandbox</h1>             <button onClick={() => handleClick()}>Set up cookies</button>         </div>     ); }

In this example, we set cookies in the handleClick() method, set off past clicking a button. Alternatively, you lot tin can utilise lifecycle methods or the useEffect hook to ready cookies when the component mounts, unmounts, or every time it updates.

You lot can effort setting the cookies yourself in this alive demo. Notation that you accept to open the preview in a new tab; otherwise, you won't exist able to see the updated cookies in the console.

Write for us

DelftStack articles are written by software geeks like you. If you besides would like to contribute to DelftStack by writing paid articles, you can check the write for us page.