DEV Community: Julie Cheng

React - Persisting Data on Page Refresh

Julie Cheng — Wed, 15 May 2024 09:38:38 +0000

It's been nearly a year since I wholeheartedly delved into learning programming and coding and one thing has become abundantly clear. There are myriad approaches to achieve the same outcome. However, each method carries its own set of advantages and disadvantages, whether it adheres to conventional wisdom or prioritizes memory efficiency. As a beginner, no matter which methods were used, seeing a functioning end product without noticeable bugs fills me with immense pride in what I've achieved.

Now, as I dive into my second full-stack project (with React powering the frontend and Flask handling the backend), I find myself confronted with a familiar challenge. To be a proficient developer, it's clear that I need to move past quick fixes and seek more sophisticated solutions.

In my project, user authentication is implemented, with user data stored in global context through UseContext. Below is a simplified example reflecting only a portion of my project.



//UserContext.jsx
const UserContext = createContext({});

const UserProvider = ({children}) => {
    const [currentUser, setCurrentUser] = useState(null);

    const login = (user) => {
      setCurrentUser(user)
    }

    const logout = () => {
      setCurrentUser(null))
    }

    return (
        <UserContext.Provider 
          value={{currentUser, login, logout}}>
            { children }
        </UserContext.Provider>
      )
  }

export { UserContext, UserProvider }



//Home.jsx
const Home = () => {
  const { currentUser } = useContext(UserContext)

  return (
    <div className='home'>
       <p> Welcome, {currentUser.username}! </p>
       <div className='posts'>
           <h4>Here are your posts</h4>
           {currentUser.posts.map((post) => (
               <PostCard key={post.id} post={post}/>
           ))}
        </div>
    </div>

export default Home

Alright, everything seems fine thus far. However, what arises as an issue is when the web page is refreshed. At that point, our entire page crashes, presenting a series of errors such as unable to map an undefined value or cannot read properties of null.

What's happening? Why is currentUser undefined? Just to provide some context, currentUser is saved in the backend by assigning the session cookie with the user id and a fetch is made through useEffect to check the session cookie during each rerender.

Firstly, it's important to note that a fetch to the backend will inherently involve some time before a response is received. Secondly, when the page is refreshed, the state value reverts to its initial state. In this case, it returns to null. Given the slight delay in retrieving currentUser from the backend, the Home component cannot render because currentUser is not yet defined.

Below is my quick band-aid fix.



//Home.jsx
const Home = () => {
  const { currentUser } = useContext(UserContext)

  return (
    <div className='home'>
       {currentUser ? 
         <>
           <p> Welcome, {currentUser.username}! </p>
           <div className='posts'>
              <h4>Here are your posts</h4>
              {currentUser.posts.map((post) => (
                 <PostCard key={post.id} post={post}/>
              ))}
           </div>
        </>  : null}
    </div>

export default Home

Since we only require a few microseconds before receiving our response with the currentUser, simply adding a conditional statement can prevent the error from crashing everything, and voilà! No more error messages.

Great! However, I don't want to have to implement this for all my components that require currentUser. Additionally, even though I find it difficult, I am striving to adhere to the principle of keeping my code as DRY (don't repeat yourself) as possible.

Let's turn to our reliable source for all things—Google. Interestingly, web browsers come equipped with build-in web storage, where data can be store and retrieve as needed. There are two types: localStorage and sessionStorage. Data stored in localStorage does not expire, while the data stored in sessionStorage is cleared when the page session ends, that is when the browser tab closes. It's important to note that this data is stored in JSON format.

Now, armed with this new information, let's examine the revised code below to address the issue of data not persisting after a page refresh.



//UserContext.jsx
const UserContext = createContext({});

const getInitialState = () => {
  const currentUser = sessionStorage.getItem("currentUser");
  return currentUser ? JSON.parse(currentUser) : null
}

const UserProvider = ({children}) => {
  const [currentUser, setCurrentUser] = useState(getInitialState);

  useEffect(() => {
      sessionStorage.setItem("currentUser", JSON.stringify(currentUser))
  }, [currentUser])

  const login = (user) => {
    setCurrentUser(user)
  }

  const logout = () => {
    setCurrentUser(null))
  }

  return (
      <UserContext.Provider 
        value={{currentUser, login, logout}}>
          { children }
      </UserContext.Provider>
    )
}

export { UserContext, UserProvider }

A new function getInitialState was defined. When called, it attempts to retrieve the currentUser value from sessionStorage. If the currentUser value exists, it will return the parsed JSON object; otherwise, it returns null.

Upon closer examination, the getInitialState function is invoked during the initial setup of the currentUser state. This means that when a page is refreshed and the state needs to be reinitialized, the initial value of the state won't necessarily be null. It will depend on whether there is available data in sessionStorage.

Now, with currentUser persisting after a refresh, are we done? Not quite. There's one more scenario to consider.

Consider this: currentUser isn't a static value. It changes with every login and logout. sessionStorage only knows about the first user who logged in. But what if that user logs out and a second user logs in? Upon page refresh, the information of the first user shows up, not the second user's. This poses a security breach that we must address.



  useEffect(() => {
      sessionStorage.setItem("currentUser", JSON.stringify(currentUser))
  }, [currentUser])

That's why we implemented this useEffect with a dependency array containing currentUser. Whenever currentUser changes due to a through login or logout, the asynchronous function within UseEffect runs. Instead of "getting" the data from sessionStorage as seen as before, this function is "setting" or replacing the currentUser data stored in sessionStorage with the JSON stringified verison of the newly updated currentUser data.

With these changes in place, refreshing the page won't trigger any errors, and data persists as expected. Great job! We've successfully resolved the issue.

Hope you find this interesting as I did. Happy coding!

References:
How to Save React State to Local Storage - YOUTUBE

How to persist React states after a refresh?!

5 Methods to Persisting State Between Page Reloads in React

The unveiling of the APIs

Julie Cheng — Fri, 23 Feb 2024 09:09:06 +0000

What is API?

API. What does this well-known acronym actually mean? How do you explain what APIs are in plain English? API stands for Application Programming Interface. OK, it is good that we now know what API stands for. But what do these combined words mean?

Based on the Merriam-Webster dictionary, interface (noun) is defined as "the place at which independent and often unrelated systems meet and act on or communicate with each other". OK, and then what? When the words application programming are added to the interface, the definition of API would be something like a software intermediary where two independent applications are able to act on or communicate with each other, that is, the connection between two different software applications, i.e. the client and the server.

To be honest, initially I had thought of an API as the backend server, but that is not the case. The API is not the same as a server, which provides resources and services to another computer program. The API is the "part of the server that receives requests and sends responses" or you can simply think of the API as a waiter. (ref.)

As a customer in a restaurant, you are not expected to fetch your own meal from the kitchen. You are not even allowed going into the kitchen at all. It is the waiter's job to receive your meal request and then pass it to the cook in the kitchen. The kitchen houses all the ingredients, recipes and the cookware that are needed for preparing the meals. The requested meal is processed, and the waiter brings back the "response" to the customer. The waiter is the "API" of this process.

Why use an API?

Now that we have established that an API is like a waiter between the client and the server. Why must we go through the waiter to get our food? Why can't we just go straight to the kitchen? Not only will that be chaotic with lots of people demanding their food all at once, but a client can walk away with someone else's food, i.e. it can cause a security breach.

Without an API, the frontend client will need to import a large set of information from the server, save it to a local database, and filter out the information that is needed for the application. And by the time the information has been narrowed down, it could be outdated.

With an API, this process is simpler and faster. The API will filter and provide the most up-to-date information the client has asked for.

How do we use APIs?

Applications communicate with each other through the web by following the HTTP protocol (Hyper Text Transfer Protocol), which includes API. This communication is also known as the request-response cycle. The client sends a request to the server and then the server will send a respond to the client as an answer to the request. There are 4 different HTTP methods that requests could use ("GET", "POST", "PATCH", "DELETE"). "GET" is the default and the most common method, and it is basically asking for the data to be sent.

Where should the client send a request then? How will the API receiving the request know which information to send back? The answer is through endpoints. An endpoint is a specific URL that the client can send a request to in order to retrieve specific data.

import requests

class getRandomDogs:
   def get_random_dogs(self):
        URL = "https://dog.ceo/api/breeds/image/random/3"
        ## the endpoint which will fetch 3 random dog images

        response = requests.get(URL)
        return response.context

images = getRandomDogs().get_random_dogs()
print(images)

Once the python file is run, the terminal will print out the json response that was received. Note: results will differ.

{
    "message": [
        "https://images.dog.ceo/breeds/newfoundland/n02111277_5898.jpg",
        "https://images.dog.ceo/breeds/buhund-norwegian/hakon2.jpg",
        "https://images.dog.ceo/breeds/spaniel-brittany/n02101388_10290.jpg"
    ],
    "status": "success"
}

What if, instead of 3 random dog pictures, I want 3 dog pictures for a specific breed. This dog API has an endpoint for that.

import requests

class getRandomDogs:
   def get_random_dogs(self):
        URL = "https://dog.ceo/api/breed/hound/images/random/3"
        ## notice the different URL - we are looking for hound only
        response = requests.get(URL)
        return response.context

images = getRandomDogs().get_random_dogs()
print(images)

{
    "message": [
        "https://images.dog.ceo/breeds/hound-afghan/n02088094_1829.jpg",
        "https://images.dog.ceo/breeds/hound-blood/n02088466_8950.jpg",
        "https://images.dog.ceo/breeds/hound-english/n02089973_3426.jpg"
    ],
    "status": "success"
}

Most public APIs will have documentation on how to use the API and will also list the endpoints for reference.

With APIs, data becomes easily accessible. The frontend does not need to spend time collecting the data, querying the data, presenting the data in a neat format. All of that is done by the API, while the front end can focus on other functions.

I hope this explanation is simple enough to follow along. Technical terminology is difficult to explain sometimes, but by using a simple metaphor the concept becomes easier to understand. In the context of understanding API, we just need to think of it as our waiter.

References and Additional Readings
DOG API

What is an API in English Please

What exactly is an Api explained in simple terms

How Apis Work

Api Less scary approach

What is repr in Python and how does it compare with str?

Julie Cheng — Fri, 17 Nov 2023 03:06:30 +0000

Learning a new programming language can feel overwhelming especially with the flood of information being thrown at you, similar to navigating a busy road with cars speeding past you.

On my journey of exploration in python, I came about this curious code that I want to learn and understand more about. What is the __repr__() method and why is it necessary when defining class objects. How is it useful? How is it different from __str__()?

Based on the official python docs, repr() will "return a string containing a printable representation of an object. For many types, this function makes an attempt to return a string that would yield an object with the same value when passed to eval(); otherwise, the representation is a string enclosed in angle brackets that contains the name of the type of the object together with additional information often including the name and address of the object. A class can control what this function returns for its instances by defining a __repr__() method."

On the other hand, as per the official python docs, str() is a "class construction for the buildin class str. str() acts similar to repr(). str() will return a string version of object. If object is not provided, returns the empty string."

Wait, to add on to the confusion. What does the double underscore mean and why is it important? Is __repr__() the same as repr()? Why am I using the definition of repr() instead of __repr__()?

The double underscore before and after indicate that the method is a magic method (also called dunder method). These special methods are intended to be triggered by different cues and operators that interact with their objects, rather than being directly called by developers.

repr() acts as the trigger for repr(), essentially meaning that calling repr() will invoke repr(). This creates the impression that they are identical functions, both yielding the same result.

Ok, now that we have a basic understanding. Let's compare __repr__() and __str__(). Both return a string that will describe the object. The difference is in the way the object is described. Based on convention, __repr__() provides a more detailed description of the object mostly used by programmers to maintain and debug the code. Usually the return string can even be used to re-create the object equal to the original one. On the other hand, the __str__() method provides a more casual and simplified description of the object, typically tailored for the user.

One of the first built-in functions you learn with Python is the print function. As the name implies, the print function prints the message on the screen once called. The message could be a string or any other object. In the background, the object is converted into a string through its __str__() method before being displayed on the screen. However, if the object's class lacks a defined __str__(), the __repr__() method is invoked as a fallback. But what if both __str__() and __repr__() are not defined?

# print a simple string
print("Hello World")
>> Hello World

#print a object instance 
class Message:
  def __init__(self, message):
    self.message = message

greeting = Message("Hello World")
print(greeting)
>> <__main__.Message object at 0x7fc4849b3700>

Instead of printing the message Hello World like in the first example, we get the object defined with its Class name and its location in memory <__main__.Message object at 0x7fc4849b3700> which is in an unreadable, not useful format. Because there are no defined __str__() or __repr__() methods for the Message class, the default string representation is printed instead. This format is inherited from the object class which is the fundamental class for all Python classes.

Now that we got this unreadable output, is there a way to make it usable? The most common workaround would be to print the class attributes itself, for example:

print(greeting.message)
>> Hello World

There is a more elegant and interesting way by using the __str__() method while defining the class. When the __str__() method is defined within the class, it will override the build-in str method.

class Message:
  def __init__(self, message):
    self.message = message

  def __str__(self):
    return f'This is the message: {self.message}'

greeting = Message("Hello World")
print(greeting)
>> This is the message: Hello World

Great. So every time we use the print function, we are able to print out a readable formatted string instead.

If we are able to manipulate the message that is printed using __str__() then why is __repr__() necessary? However when you use a python REPL terminal and just inspect the greeting itself, it will return the same unreadable object from before.

This is where repr() becomes particularly useful. As mentioned on the python docs, repr() will "return a string that would yield an object with the same value when passed to eval()". So we will need to define __repr__() in our class definition in a way that it will produce the same object. Let us see this in action.

When we inspect the greeting, the return output is Message(message ='Hello World'). Where have we seen this output format before? The first Message is the class name followed by the parentheses and the attribute message needed to create an instance/object. With this representational string we are able to re-create an object equal to the original one.

I hope this article has helped you understand the basic difference between repr(), str() and their corresponding dunder methods. Please feel free to comment or leave any feedback or corrections I need to address.

Below are my sources:

React error: Too many re-renders. Why am I getting these errors?

Julie Cheng — Fri, 08 Sep 2023 17:55:32 +0000

As a beginner learning to code, I should be familiar with encountering errors. However they are still extremely frustrating when I see the same error over and over again. With learning React, the most common error I see was:

What was I doing wrong here and why is this happening? Unlike other coding errors you might have encountered, this error is pretty clear and understandable. Because the component is re-rending too often, react puts a stop on the re-renders which will be in a form of the error message.

Here is a simple example where this error occurs:

function App() {
   const [count, setCount] = useState(0);

   setCount(count + 1)

   return (
      <div> Counter: {count}</div>
   );
}

SetCount is called immediately without any condition or event handler. Which causes the react component to re-render due to a change in state. From the re-render, setCount gets invoked again which causes the component to re-render again. If possible, this loop will continue indefinitely. Instead react will give you an error message telling you that an infinite loop has been created.

The solution to this problem is to simply include a conditional statement or event handler before calling the setter function.

function App() {
   const [count, setCount] = useState(0);

   function handleClick() {
       setCount(count + 1)
   }

   return (
      <>
         <div> Counter: {count} </div>
         <button onClick={handleClick}> Click Me! </button>
      </>
   );
}

Another common beginner's mistake is to call the event handler right away without meaning to. If the event handler changes state, this simple mistake will lead to our not so favorite "too many re-render" error.

function App() {
   const [count, setCount] = useState(0);

   return (
      <>
        <div> Counter: {count} </div>
        <button onClick={setCount(count + 1)}> Click Me! </button>
      </>
   );
}

The onClick function is called right away during the first load, instead of when the event is trigger. This cause state to change right away and then the component get re-renders and the cycle repeat on and on.

To solve this, a function need to be passed into the onClick event handler.

function App() {
   const [count, setCount] = useState(0);

   return (
    <>
      <div> Counter: {count} </div>
      <button onClick={()=> setCount(count + 1)}> Click Me! </button>
    </>
   );
}

Another example where you can commonly see this error is when you use the UseEffect hook and don't include a dependencies array.

function App() {
   const [count, setCount] = useState(0);

   useEffect(() => {
      setCount(count + 1)
   });

   return (
      <div> Counter: {count}</div>
   );
}

To better understand this, let's think about the sequence of events. The useEffect hook runs its callback function after the component is first rendered. Without any dependencies array, useEffect will continue to run the function every time the component gets re-render.

render -> useEffect -> setState -> re-render -> useEffect

Using the example above, the component first gets rendered, then useEffect changes the state which causes the component to be re-render. Which then causes UseEffect to get run again, which will change state again. And the cycle repeats until a familiar error shows up again.

To avoid this infinite re-rendering, the simplest solution is to add a dependencies array to limit the amount of time useEffect is called.

function App() {
   const [count, setCount] = useState(0);

   useEffect(() => {
      setCount(count + 1)
   }, []);   // <- empty dependencies array, will only run once

   return (
      <div> Counter: {count}</div>
   );
}

I hope this has helped in obtaining a better understanding of this common React error.

Source: https://bobbyhadz.com/blog/react-too-many-re-renders-react-limits-the-number

Array Iterations - What makes them so useful?

Julie Cheng — Tue, 13 Jun 2023 14:53:03 +0000

Learning about the built-in array iterator methods was a game changer for me. It quickly became one of my favorite Javascript tools in manipulating arrays. I was able to make my code cleaner with less lines needed.

How should you use them? When do you use them? What makes one method better to use than another? Why do I consider it an important tool to know in JavaScript?

What is an Array?

Let's start from the beginning.
As defined in the MDN website: An array is an ordered collection of data. In other words, it is a list that holds multiple individual data together. Instead of using multiple variables to call the entire collection, we could just use one name for the entire array.

const first = 1
const second = 2
const third = 3

//use this instead
const myArray = [1, 2, 3, 4, 5]

What's next?

Now that we have an understanding of what an array is, let's talk about array iterations.

So, what if I need to manipulate each of the elements in myArray in a specific way? We could use a for..of loop to do it.

const myArray = [1, 2, 3, 4, 5]
const newArray = [ ]
for (const num of myArray) {
    newArray.push(num*2)
}

//=> newArray = [2, 4, 6, 8, 10]

It looks good. We were able to multiply each element by 2 and push each result in a new array. But we will need to declare an empty array each and every time. There is another way where you don't need the extra declaration - by using map.

const myArray = [1, 2, 3, 4, 5]
const newArray = myArray.map(num => num *2)

//=> newArray = [2, 4, 6, 8, 10]

Using map had allowed me to use fewer lines of code to produce the same result. Another advantage of using map is that its expressive. In other words, when another programmer reads the code they will know that map will modify each element of the array and will return a new array with the modified elements. In comparison, with using for...of, the programmer will need to read the entire block code to understand what the code is doing and what will be returned.

Another iteration method that is commonly used is filter, in which it will return a new array with all the elements that meet a condition (i.e. returns true) set by the callback function.

const myArray = [1, 2, 3, 4, 5]
const oddArray = myArray.filter(num => (num % 2) === 1)

//=>oddArray = [1, 3, 5]

Like map, using filter is expressive. It implies that it will filter out the array elements that do not pass the condition and return a new array containing all the elements which do.

So far, both map and filter methods are returning an array. However, the reduce method returns a single summary result. Reduce will execute the call back function for each element of the array, while passing the return calculated value from the previous element until the final aggregate result is left. Note: When using reduce, the callback function is passing two parameters; accumulator and the current number element. Accumulator should always be the first argument and the second argument will be the array element. The order matters.

const myArray = [1, 2, 3, 4, 5]
const myResult = myArray.reduce(function(accumulator, num){
          return num + accumulator
          }, 0)

//=> myResult = 15

Note that reduce take an optional initial accumulator value parameter. For this example, the initial value is 0. If no initial value is provided, the first element of the array is used as the starting value and second element will be pass through the callback function with the first element as the accumulator. Meaning the first element is skipped and will not be executed by the callback function. With addition this is not be an issue, but what if the callback function something more complex.

const myArray = [2, 3, 4]
const doubleResult = myArray.reduce(function(accumulator, num){
          return num * 2 + accumulator
          }, 0)
//=> doubleResult = 18

//Without an initial value
const myArray = [2, 3, 4]
const doubleResult = myArray.reduce(function(accumulator, num){
          return num * 2 + accumulator
          })
//=> doubleResult = 16

Look at that. Two different results. As a good practice when using reduce, remember to include an initial value to avoid getting an unexpected result.

forEach is another array iterator method. It is known as the least expressive and has no return value. You could think of forEach as the most generic of all iterator methods. It will execute the callback function once for each array element. forEach can be used in replacement of reduce or map and produce the same results, however it will lose the expressive that using reduce or map provide. That is the intention of the function becomes unclear for another programmer.

const myArray = [2, 3, 4]
function doubleResult(numArray) {
  let total = 0
  numArray.forEach(function(num){
    total = num * 2 + total
  })
  return total
}
//=> doubleResult(myArray) = 18

So when should you use the forEach method? Since forEach does not return anything, the best time to use it is when you don't need anything to be return back. For example, during a debugging process, forEach can be used to log each array element.

unknownArray.forEach(function(e){
     console.log("I am" + e)
     })

Another time forEach will be appropriate is when the array elements need to be mutated or changed. The previous mentioned iteration methods (map, filter, reduce) are nondestructive, meaning they do not change the original array.

const myArray = [ 
  {name: "Spot", pet: "dog"}, 
  {name: "Mittens", pet: "cat"}, 
  {name: "Bow", pet: "bird"}
]

myArray.forEach(function(e){
    e.isCute = "yes"
  })

/*=> myArray = [
   {name: "Spot", pet: "dog", isCute: "yes"}, 
   {name: "Mittens", pet: "cat", isCute: "yes"}, 
   {name: "Bow", pet: "bird", isCute: "yes"}
 ]  */

There are other array iteration methods that are not discussed here, but I have covered the most commonly used methods. I hope this has been a helpful summary for you.

You can find more information here:
MDN array.prototype.filter()
MDN array.prototype.map()
MDN array.prototype.reduce()
MDN array.prototype.forEach()