Scribd
Upload
41 views

React Interview

This document discusses React interview concepts including components vs elements, ReactDOM and the virtual DOM, lifecycle methods, props vs state, controlled vs uncontrolled components, hooks, higher order components, and other advanced React topics.

Uploaded by

julian.carax1904
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
41 views

React Interview

This document discusses React interview concepts including components vs elements, ReactDOM and the virtual DOM, lifecycle methods, props vs state, controlled vs uncontrolled components, hooks, higher order components, and other advanced React topics.

Uploaded by

julian.carax1904
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 5

React interview

Basic concepts
Component vs Element
● Component: used to build your block of UI.
○ Class component
○ Functional Component
The “return” of render() in class component or in functional component is
telling what the DOM should look like when this component is rendered in browser

● Element: an object that is returned from component, this is what your see as
UI in browser -> represent the DOM node that the component represents

ReactDOM and Virtual DOM


● ReactDOM take a component and pass it to the root node in Virtual DOM to
change UI
● React maintains virtual DOM instead of the real tree DOM, because the
operations (add, remove or update nodes) on the DOM tree are very
expensive. Instead of doing this, React will create a copy of the real DOM
tree, called Virtual DOM. If the UI changes (re-render), then React will
compare the Virtual DOM before and after update (heuristic algo of React
team!!), and then decide to change the updated piece of Virtual DOM into the
real DOM but just the piece of node that might have changed in Virtual DOM

React.createElement vs JSX
● React.createElement tells React what the DOM should look like when a
component is rendered
● JSX: allow to write the returned DOM of a component as HTML-like code in
JS, instead of using React.createElement

Props vs State, PropTypes + defaultProps


● props: parameters of React component, used to pass data from parent
component to its child component, so it comes from the outside of a
component
● state: data of a React component itself, defined in the block of a component
and used to describe the state of a component in its cycle of life. When state
changes, component will update (re-render) itself
● PropTypes: define the contract to props (its data structure, data type,...)
Life cycle methods | class component
Life cycle of a React component:
● Mounting (render/inject component to the DOM),
● Updating (props and state changed)
● Unmounting (remove component from the DOM)
3 main life cycle methods:
● componentDidMount() : is called after the component is mounted to the DOM (just
once time - the first time after the component is mounting on the DOM)
● shouldComponentUpdate(nextProps, nextState) : component will update if it
returns true, else no updating
● componentDidUpdate(prevProps, prevState) : is called after the component is
updated (props/state has changed then do sth to change component…)
● componentWillUnmount() : is called right before the component is unmounted from
the DOM
-> Used to fetch some data when a component is mounting or clean up some ressources
when component is removed from the DOM

Composing Components
● A way to write a reusable component
○ props.children
○ pass a function that return components as props

Controlled vs Uncontrolled component


Remark when handling a form input in a React component
● Controlled component: A component manages the changes of form input itself via
state system and event handler
● Uncontrolled component: A component manages the changes of form input via
DOM directly, must one is using React.createRef() or useRef()

Method binding (this keyword)


● a class in JS do not have a context itself
● binding a class’s method with this

Advanced concepts

Higher-Order Component
● Higher-order function: a function that takes another function as a parameter or
return another function
● Higher-Order Component: is a function that takes a component and return another
component
Example: A Higher Order Component withInput() which can handle all the input type

React Router
Router

Hooks
Hooks is a new addition in React 16.8. They allow to use state, lifecycle methods and other
React features for functional component without writing a class component

Basic hooks:
● useState(initialState) : take an argument and return a current state and a method to
modify state
● useEffect() : purposes like componentDidMount, componentDidUpdate and
componentWillUnmount lifecycle methods
○ useEffect(() => {...}) like componentDidMount and componentDidUpdate
○ useEffect(() => {...}, []) like componentDidMount
○ useEffect(() => {...}, [props1/state1, props2/state2,...]) like
componentDidMount, shouldComponentUpdate
Clean up function in useEffect is used to remove some codes from the precedent
render of useEffect, for example to remove an event listener from the last run of useEffect
Clean up function in useEffect : componentWillUnmount()

Other Hooks
● useReducer(reducer, initialArg, init)
○ reducer : (state, action) => newState
○ return [state, dispatch]

● useContext(): consume data from a Context object that has been created from
‘createContext()’ method -> It is used to share data that can be considered "global"
within a component tree without having to pass props down to every level.

● useCallback(): return a memoized callback function and it is used when you want to
memoize a callback function to prevent unnecessary re-renders
This is useful when you have a function in a parent component that is used as props
in its child component and that function is re-created every time the parent
component re-renders, causing unnecessary re-renders of the child children. It is
usually used with useEffect to avoid the unnecessary re-render

In the example below, ‘handleClick’ function is only re-created if ‘onClick’ function changes

● useMemo() : return a memoized value

● useRef()

Form using Hook: see here

Custom Hooks

Context

Ref

Redux

Basic concepts

Advanced concepts

You might also like