flex-basis

Similar to width, it allows you to specify the initial size of the box.

flex-grow

You can fill the available space in the overall box by giving it a value of 1. The default value is 0.

flex-shrink

It allows you to dynamically reduce the size of the box. The default value is 1.

flex-wrap

If the boxes exceed the screen width, they can be wrapped to the next line.

• React Query efficiently manages data through unique keys, preventing duplicate fetch calls and improving performance.

For example, if you create a fetch function via a custom hook, it will be called each time it’s used, leading to unnecessary calls for the same data.

Query Keys

React Query manages cached queries using query keys, organizing complex objects and long strings as arrays.

Since these keys are serializable, they serve as unique identifiers for the cached data.

While using React, I mostly relied on the built-in hooks to handle most of my logic. However, I often pondered how to increase reusability for repetitive code.

I believed that effectively using custom hooks would help me become a higher-level frontend developer.

The most important principle of custom hooks is “reusability of logic, not values.”

By specifying only the values related to state changes as parameters within the hook, we can define the logic based on side effects.