Under-the-hood of React Hooks

- React overview
- React Hooks
- The useState Hook

#react #hooks

Master Scrolling with React

- Scroll to an Element
- Scroll to an Exact Location
- Benefits of Scroll Effect
- Popular Scrolling Libraries for React
- Concluding Thoughts

#react #js #scroll

Adding a layer of more explicit typings on top of 3rd party library interfaces

- AG Grid: Typing Column Types
- Potential Issues
- Solving Potential Issues 1) and 2)
- Implementing SupportedColTypes Safely
- Formly: Typed Formly Config Builder

#react #angular #ts

Inside Fiber: in-depth overview of the new reconciliation algorithm in React

- Setting the background
- From React Elements to Fiber nodes
- General algorithm
- Commit phase

#react #fiber #reconciliation

Why you should stop using the “container/presentational” pattern in Redux

The redux style guide has an important rule: “Connect More Components to Read Data from the Store”. This rule has some important performance aspects that are covered with an example in this post.

#react #redux

Should You Really Use useMemo in React? Let’s Find Out.

- What is useMemo?
- What does React say about useMemo?
- Hypothesis
- Benchmarking Setup
- Results

#react #hooks #performance

CPT Custom Hooks, React Router

useHistory
useRouteMatch
useParams
useLocation

#react #hooks

How and Why You Should Store React UI State in the URL

- Bring back deep linking on the web
- Dead-Simple Deep Linking
- The Code

#react #statemanager

How to useRef to Fix React Performance Issues

- The Problem
- The Aha Moment
- The Solution
- When to useRef

#react #hooks

React Architecture Patterns for Your Projects

Navigating a Directory Structure
Create Custom Hooks
Use Absolute Imports
Open Source Session Replay
Separate business logic from UI
The Utils directory
Avoiding creating a single Context for everything

#react

Simple Readable Client-side Architecture — React

UI Components
Containers
Interactions
API Related Data
Global states
Selectors
Benefits
Readability
Shareability
Testability
Conclusion

#react #architecture

Why custom react hooks could destroy your app performance

Let’s build a modal dialog on custom hooks
Performance implications
Adding more functionality to the useModal hook

#react #hooks

How to write performant React code: rules, patterns, do's and don'ts

Let's structure our app first
Implementing Page component
Refactoring Page component - with performance in mind
Implementing the list of countries
Implementing selected country
Final polish: theming

#react #hooks

Why React Re-Renders

The core React loop
It's not about the props
Profiling with the React Devtools
Going deeper
Bonus: Performance tips

#performance #react