React js Questions

React Js All Topic for future reference

What custom Hooks are, and how to write your own

How to reuse logic between components

How to name and structure your custom Hooks

When and why to extract custom Hooks

How to fix infinite Effect dependency loops

What to do when you want to remove a dependency

How to read a value from your Effect without “reacting” to it

How and why to avoid object and function dependencies

Why suppressing the dependency linter is dangerous, and what to do instead

How to choose between an event handler and an Effect

Why Effects are reactive, and event handlers are not

What to do when you want a part of your Effect’s code to not be reactive

What Effect Events are, and how to extract them from your Effects

How to read the latest props and state from Effects using Effect Events

How an Effect’s lifecycle is different from a component’s lifecycle

How to think about each individual Effect in isolation

When your Effect needs to re-synchronize, and why

How your Effect’s dependencies are determined

What it means for a value to be reactive

What an empty dependency array means

How React verifies your dependencies are correct with a linter

What to do when you disagree with the linter

Why and how to remove unnecessary Effects from your components

How to cache expensive computations without Effects

How to reset and adjust component state without Effects

How to share logic between event handlers

Which logic should be moved to event handlers

How to notify parent components about changes

What Effects are

How Effects are different from events

How to declare an Effect in your component

How to skip re-running an Effect unnecessarily

Why Effects run twice in development and how to fix them

How to access a DOM node managed by React with the ref attribute

How the ref JSX attribute relates to the useRef Hook

How to access another component’s DOM node

In which cases it’s safe to modify the DOM managed by React

How to add a ref to your component

How to update a ref’s value

How refs are different from state

How to use refs safely

How to “remember” information without re-rendering

How to access DOM elements managed by React

How to synchronize components with external systems

How to remove unnecessary Effects from your components

How an Effect’s lifecycle is different from a component’s

How to prevent some values from re-triggering Effects

How to make your Effect re-run less often

How to share logic between components

How to combine a reducer with context

How to avoid passing state and dispatch through props

How to keep context and state logic in a separate file

What “prop drilling” is

How to replace repetitive prop passing with context

Common use cases for context

Common alternatives to context

What a reducer function is

How to refactor useState to useReducer

When to use a reducer

How to write one well

When React chooses to preserve or reset the state

How to force React to reset component’s state

How keys and types affect whether the state is preserved

How to share state between components by lifting it up

What are controlled and uncontrolled components

When to use a single vs multiple state variables

What to avoid when organizing state

How to fix common issues with the state structure

How declarative UI programming differs from imperative UI programming

How to enumerate the different visual states your component can be in

How to trigger the changes between the different visual states from code

How to think about UI changes as state changes

How to structure state well

How to “lift state up” to share it between components

How to control whether the state gets preserved or reset

How to consolidate complex state logic in a function

How to pass information without “prop drilling”

How to scale state management as your app grows

How to add, remove, or change items in an array in React state

How to update an object inside of an array

How to make array copying less repetitive with Immer

How to correctly update an object in React state

How to update a nested object without mutating it

What immutability is, and how not to break it

How to make object copying less repetitive with Immer

What “batching” is and how React uses it to process multiple state updates

How to apply several updates to the same state variable in a row

How setting state triggers re-renders

When and how state updates

Why state does not update immediately after you set it

How event handlers access a “snapshot” of the state

What rendering means in React

When and why React renders a component

The steps involved in displaying a component on screen

Why rendering does not always produce a DOM update

How to add a state variable with the useState Hook

What pair of values the useState Hook returns

How to add more than one state variable

Why state is called local

Different ways to write an event handler

How to pass event handling logic from a parent component

How events propagate and how to stop them

How to handle user-initiated events

How to make components “remember” information with state

How React updates the UI in two phases

Why state doesn’t update right after you change it

How to queue multiple state updates

How to update an object in state

How to update an array in state

How React “sees” component structures

What a render tree is and what it is useful for

What a module dependency tree is and what it is useful for

What purity is and how it helps you avoid bugs

How to keep components pure by keeping changes out of the render phase

How to use Strict Mode to find mistakes in your components

How to render components from an array using JavaScript’s map()

How to render only specific components using JavaScript’s filter()

When and why to use React keys

How to return different JSX depending on a condition

How to conditionally include or exclude a piece of JSX

Common conditional syntax shortcuts you’ll encounter in React codebases

How to pass props to a component

How to read props from a component

How to specify default values for props

How to pass some JSX to a component

How props change over time

How to pass strings with quotes

How to reference a JavaScript variable inside JSX with curly braces

How to call a JavaScript function inside JSX with curly braces

How to use a JavaScript object inside JSX with curly braces

Why React mixes markup with rendering logic

How JSX is different from HTML

How to display information with JSX

What a root component file is

How to import and export a component

When to use default and named imports and exports

How to import and export multiple components from one file

How to split components into multiple files

What a component is

What role components play in a React application

How to write your first React component

How to write your first React component

When and how to create multi-component files

How to add markup to JavaScript with JSX

How to use curly braces with JSX to access JavaScript functionality from your components

How to configure components with props

How to conditionally render components

How to render multiple components at a time

How to avoid confusing bugs by keeping components pure

Why understanding your UI as trees is useful