Today marks the third weekly log.

My Week in Life

Nothing special happened this week in my life. I just stayed at home and did some studying.

Recently, I've been preparing for my interview. I noticed a funny phenomenon: In the Chinese workplace, having a gap in your resume is treated almost as if it's against the law. Regardless, preparing for my interview and finding a good team are the important tasks for the next couple of months.

Having reviewed the photos I printed last week, I've come to realize that photography can serve as a measure of time. I printed 210 photos spanning the last six years, and it made me feel the passage of time. So, I decided to dive deeper into photography, and capture more photos while I still live in the world. It will be good proof that I’ve been in this world.

I have an idea to build a photography app that focuses solely on photography and discussions about it, with no videos or ads. Unlike Instagram or other apps, there are many distractions when I want to talk or share something about photography. Sometimes, I just want someone to review my work and comment on it to help me improve. I wish the app comes true.

My Week in Study

Recently, I’ve been diving into ReactJS, the under hood of ReactJS. Even though the ReactJS team provided documents and blogs, I still need deeper insights to understand it.

I’m going to talk a little about Immutability in React here.

As we know, JavaScript is an interpreted programming language, and it’s also characterized as dynamic, weakly typed, prototype-based and multi-paradigm. The dynamic nature of JavaScript is why React needs immutability.

JavaScript is “dynamic”

Dynamic in JavaScript refers to its capability to execute code at runtime. As a scripting language, JavaScript allows you to make modifications dynamically, like updating variables, functions or properties at run time after the code has been loaded and is currently running.

Consider the example below:

1let a = [1,2,3];
2let b = a;
3b.push(4);
4
5console.log(b); //[1,2,3,4]
6console.log(a); //[1,2,3,4]

This behavior is also called Mutability, there are some side effects of mutability:

• JIT compiler might have a harder time optimizing property access operations.
• Unexpected changes lead to strange errors and difficult-to-understand behavior.
• Increased debugging difficulty, it’s hard to identify the true state at that time.
• Makes management more complicated, such as undo/redo functionality.

Immutability in React

React is a library to build user interfaces, it’s built up with JavaScript. React promotes the concept of immutable data, it means that once created, the data cannot be changed.

As a React developer, you must know that Element is the smallest building block of React apps, it’s a plain object, and is cheap to create.

React elements are immutable. Once you create an element, you can’t change its children or attributes. An element is like a single frame in a movie: it represents the UI at a certain point in time. — React docs

Now, we know that React apps consist of elements, so they are JavaScript objects, immutable objects.

In React, each render is a snapshot, just like a single frame in a movie, so it needs to figure out what’s changed between these two snapshots. This requires each snapshot to be immutable, otherwise, it’s hard to know how changes affect the user interface.

Think about the GIF image below:

React snapshots comparison

When you trigger a swipe, it figures out changes between two images(snapshots), each image is a React render result, immutable data ensures the render result is consistent.

So, that’s why immutability is important to React. Based on this, I may talk about why react re-renders in the next blog.

My week in Dev

This week I received the reply of a Vercel issue from Lee Robinson, even though it’s just an incorrect definition issue of the Vercel document. It’s a happy thing, because this issue was resolved and taken seriously by the official team.

Another thing was that I drafted a feature design for a side project based on the collaborative design team's works, it's a theme selector. But this is still an idea that we need to discuss further.

ZenUML theme selector

Oh my God, it's my anniversary with Diana today. I'm going to spend the rest of the day with her. See you next week.