When implementing "press Enter to submit" functionality, developers must handle IME composition for languages like Chinese, Japanese, and Korean. Users shouldn't accidentally submit incomplete text while still composing. However, Safari and Chrome handle this differently. This article explores the specifications and practical solutions for cross-browser compatibility.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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."
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.
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.
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.
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!
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.
When I started learning JS in 2019, using let/const was already advocated, yet many resources online still use var. What are their differences?
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.
This article explains the problems encountered with float and three solutions using "clear:both".