ProgrammingFarmer

All Articles

React2025-02-11

Understanding the Top-Level Rule of React Hooks: Insights from React Hooks Source Code and Data Structures

The React official documentation clearly states "Only call Hooks at the top level," which extends to various rules when using Hooks, such as not using Hooks in if/else conditions or loops. But why can't we call Hooks in conditions, loops, or other situations? This is actually related to the data structure of React Hooks. This article will explore the reasons behind this rule by examining the React Hooks source code.

React2025-01-08

Understanding useEffect Hooks for Data Fetching and Subscriptions - Common Pitfalls and Solutions

React's useEffect Hook is essential for managing side effects, but its use for data fetching and subscriptions can lead to race conditions, memory leaks, and duplicate operations. This article explores common problems in useEffect for data fetching and subscriptions, and introduces practical solutions.

JavaScript2024-09-08

Understanding JS Prototypes: From Prototype, Prototype Chain to Prototype Pollution

JS prototypes may seem distant from developers, but they are actually very close, as the native functions developers use are always related to the Prototype Chain. Furthermore, prototype pollution is a security issue, and if developers better understand prototypes, they can avoid writing anti-pattern code.

Frontend Infra2023-10-29

A Comprehensive Guide to Frontend Error Handling: From UI Layer to Monitoring

In software services, having a robust error handling and monitoring system allows for faster problem identification and resolution, reducing user frustration and improving experience. Error handling in software covers a wide range of areas; this article focuses on "frontend error handling processes" including error display (UI), error information logging, and error monitoring alerts.

Redux, React2023-08-31

Understanding Redux Source Code (5) - From HOC to Hooks, Implementing useSelector and useDispatch

As React-Redux versions have evolved, the official recommendation has shifted toward using Hooks instead of the previous HOC pattern (e.g., `connect`). In this article, we'll explore the benefits of this transition and understand and implement React-Redux's most important Hooks - useSelector and useDispatch.

Redux, React2023-07-30

Understanding Redux Source Code (4) - Understanding React-Redux Combination Through Provider and connect

In the frontend world, it's uncommon to use Redux alone, but rather React and Redux together, aka React-Redux. In this article, we'll explore the implementation of the core parts of React-Redux, focusing mainly on the Provider component and connect method.

Career2023-01-08

Reflections After Two and a Half Years of Career Change: Thoughts on What I Overestimated and Underestimated

This article is written two and a half years after my transition to becoming a frontend engineer. It records the evolution of my career-related mindset and perspectives. Beyond just career switching, it documents many professional insights I now realize I either overestimated or underestimated in the past.

Redux, JavaScript2022-01-20

Understanding Redux Source Code (3) - Let's Implement combineReducers

In the previous two articles about Redux source code, we implemented createStore and applyMiddleware. In this article, we will implement combineReducers, which is responsible for integrating multiple reducers, to understand how Redux accomplishes this.

Redux, JavaScript2021-12-30

Understanding Redux Source Code (2) - Implementing middlewares, applyMiddleware, and createStore enhancer

Following the previous Redux series article where we implemented createStore's getState, dispatch, and subscribe, this article will advance to implementing Redux middleware-related functionality such as applyMiddleware and createStore's enhancer. Let's explore Redux more deeply with curiosity.

Redux, JavaScript2021-12-01

Understanding Redux Source Code (1) - Implementing createStore's getState, dispatch, and subscribe

I was curious about how Redux implements centralized state management and unidirectional data flow concepts, so I decided to read the Redux source code and implement a basic createStore function, focusing on the getState, dispatch, and subscribe APIs.

Career2021-11-23

Reflections on Job Requirements for My Second Frontend Engineer Position

This article documents the job requirements I set when looking for my second frontend engineer position, along with detailed reasons and reflections on why I established these criteria. It also includes a brief story about "changing jobs again just one week after joining a new company."

JavaScript2021-07-25

Understanding JavaScript Execution Flow: The Event Loop Explained Through Code Examples

When learning JavaScript execution flow, it's essential to understand the Event Loop, including concepts like Call Stack, Callback Queue, Macrotasks, and Microtasks. This article explains these in detail, helping you better understand execution order when combining promises, setTimeout, and other asynchronous operations.

JavaScript2021-06-01

Principles and Implementation of Shallow Copy and Deep Copy in JavaScript

When copying Object data types in JavaScript, the address is copied rather than the original value, so manipulating the copied variable can easily affect the original variable and vice versa, potentially causing unexpected bugs. To solve these problems, it's essential to understand the two copying methods for Object data types - Shallow Copy and Deep Copy.

JavaScript2021-05-20

Understanding JavaScript Variable Passing: Pass by Value, Pass by Reference, or Pass by Sharing?

In JavaScript, you often hear that primitive type variables are passed by value, while object type variables are passed by reference. However, when researching deeper, you'll encounter the term pass by sharing, or even assertions that JavaScript is entirely pass by value. What's really going on? This article will explore how variables are stored in memory and copied, gradually building an understanding of pass by value, pass by reference, and pass by sharing in JavaScript.

React2021-05-01

Deep Understanding of React.createElement and JSX

When writing React, we're accustomed to using JSX syntax, but after using it for a while, questions arise - What does JSX compile to? What's the underlying Raw API? What are JSX's features? We'll explore these questions in this article!

JavaScript2020-11-29

parseInt / parseFloat / Number, Comparing Methods for Converting Strings to Numbers

Recently at work, I encountered choices between using parseInt or Number for string type conversion, so I read the ES6 specifications and MDN definitions to broadly understand the differences between parseInt / parseFloat / Number. The article explains why parseInt(010, 10) results in 8.

JavaScript2020-10-25

JS Variable Declaration, Differences Between var and let/const

When I started learning JS in 2019, using let/const was already advocated, yet many resources online still use var. What are their differences?

Career2020-08-17

Reflections After Three Months as a Frontend Engineer

This article was written about three months after my career transition to a frontend engineer, mainly documenting why I switched careers and whether there was a gap between expectations and reality.

CSS2019-11-05

Three Ways to Solve Float Problems with Clearfix

This article explains the problems encountered with float and three solutions using "clear:both".