Smooth Scrolling to an Element using scrollIntoView in React with a Fixed Header

Fixed headers are a popular design choice for websites. However, scrolling to an element that includes a fixed header can present several challenges. In this blog post, we will discuss how to overcome these challenges and scroll smoothly to elements with fixed headers.

Writing re-usable code with React Composition

React Composition helps make our code more efficient, and easier to maintain and update in the long run. Instead of relying on one big component to do everything, we break it down into smaller parts, so we can reuse them in other places, and build even more complex components.

Choosing between useReducer and useState in React

There is a lot of confusion while choosing the state management methods. One of them is 'When to use useReducer versus useState?'. In this blog, we will discuss the points to help select between 'useState' and 'useReducer'.

When to extract code to React custom hooks?

React custom hooks help us to build reusable logic, and make the code more readable. In this blog, we will talk about when and when not to use react custom hooks.

When to use the two hooks - useCallback and useMemo?

useCallback hook and useMemo hook are used for performance improvising, where useCallback hook returns memoized function and useMemo returns memoized value.

Understanding the difference between React useEffect and useLayoutEffect hooks

useEffect hook and useLayoutEffect hook differ in the timing of their invocation. useEffect hook runs asynchronously after the DOM has been painted whereas useLayoutEffect runs synchronously after all DOM mutations.

React custom infinite scroll with pagination

React custom infinite scroll with pagination helps developers to improve performance of the website.

Know about the useInsertionEffect hook in React 18

The useInsertionEffect hook in React 18 is mostly for CSS-in-JS libraries for inserting global DOM nodes like 'style' or SVG 'defs' in the document.

React 18 adds onResize event to video elements

Before React 18, onResize handlers were ignored on video elements. React 18 now adds support for the onResize media event.

React 18 allows components to render 'undefined'

Before React 18, if we did not want to render anything, we had to return 'null' or an empty fragment. React now allows undefined to be rendered.