ReactJS - Reference API

React JS is a JavaScript library for building user interfaces. React allows developers to create interactive UI components efficiently. So this reference attempts to document every built-in function, hooks, components, and other essential functionalities provided by React JS. In this tutorial we will use the React@18 version.

In the React JS, functions are organized into two main sections based on their functionalities and usage. Here are the main functions in React JS

Built-in Hooks

In this we have included all the built-in hooks which can be used with different React features in your components.

S.No Function & Description
1 use()

Lets us read the value of a resource.
2 useDebugValue()

Add a label to a custom Hook.
3 useDeferredValue()

Lets us defer updating a portion of the User Interface.
4 useId()

Use for generating unique IDs.
5 useImperativeHandle()

Helps us connect with a child component.
6 useInsertionEffect()

Allows us for inserting elements into the DOM.
7 useLayoutEffect()

Used to perform the layout measurements.
8 useSyncExternalStore()

Lets us subscribe to an external store.
9 useTransition()

Help us to update the state without blocking the UI.

Built-in Component

In this we have documented components you can use in your code and other components as well.

S.No Function & Description
1 <Suspense>

Display a fallback until its children have finished loading.

Built-in React APIs

There are some built-in APIs React provides which are useful for defining components.

S.No Function & Description
1 cache()

Cache the result of a data fetch.
2 createContext()

It creates a context that components can provide.
3 lazy()

Allows us to delay loading a component's code.
4 startTransition()

Update the state without blocking the UI.

Directives

These are the instructions for bundlers compatible with React Server Components.

S.No Function & Description
1 use client

Used to mark what code runs on the client.
2 use server

It is used to mark server-side functions.

Built-in React DOM Hooks

There are some built-in React DOM hooks which run in the browser DOM environment. These Hooks are not best fit for non browser environments like Android, iOS, and Windows applications.

S.No Function & Description
1 useFormState()

Update state as per the result of a form action.
2 useFormStatus()

Gives status information of the last form submission.

Event Handling Functions

In this section we have included some event handling functions that supports all built−in HTML and SVG components.

S.No Function & Description
1 event object

Acts as a link between our code and the browser events.
2 AnimationEvent handler

An event handler type for the CSS animation events.
3 ClipboardEvent handler

It is an event handler type for the Clipboard API events.
4 CompositionEvent handler

It is an event handler type for the input method editor events.
5 DragEvent handler

Event handler type for the HTML Drag and Drop API events.
6 FocusEvent handler

An event handler type for the focus events.
7 InputEvent handler

An event handler type for the onBeforeInput event.
8 KeyboardEvent handler

Handles events for keyboard events.
9 MouseEvent handler

An event handler type for mouse events.
10 PointerEvent handler

It is an event handler type for pointer events.
11 TouchEvent handler

Event handler type for touch events.
12 TransitionEvent handler

An event handler type for the CSS transition events.
13 UIEvent handler

Event handler type for generic User Interface events.
14 WheelEvent handler

An event handler type for the onWheel event.

React DOM APIs

The react-dom package contains methods that are only supported for the web applications. In this section we have included APIs, Client APIs and server APIs.

S.No Function & Description
1 createPortal()

Get the current Axes instance.
2 flushSync()

Create a new Axes instance.
3 findDOMNode()

Close the current figure.
4 createRoot()

Clear the current figure.
5 hydrateRoot()

Check if a figure with a given figure number exists.
6 renderToReadableStream()

Create a new figure.
7 renderToString()

Get the current figure.
8 renderToStaticMarkup()

Get the labels of all figures.
9 cloneElement()

Set the current Axes instance to a given axes.
10 isValidElement()

Add contour labels to a contour plot.
11 PureComponent

It is an enhanced version of the regular Component.

Other Class components

These components are the base class for the React components defined as JavaScript classes. Class components are still supported by React so we have included them in the below section.

S.No Function & Description
1 componentDidCatch()

Used to call when some child component throws an error.
2 componentDidUpdate()

Used to call immediately after component has been re−rendered.
3 componentWillUnmount()

Call it before your component is removed.
4 forceUpdate()

Forces a component to re-render.
5 getChildContext()

Specify the values for the legacy context.
6 getSnapshotBeforeUpdate()

Enables your component to capture some information.
7 static contextType

Lets us specify which legacy context is consumed.
8 static defaultProps

Used to set the default props for the class.
9 static propTypes

To declare the types of the props accepted by your component.
10 static getDerivedStateFromError()

Call it when a child component throws an error during rendering.
11 static getDerivedStateFromProps()

Used to call it right before calling render.
12 UNSAFE_componentWillMount()

It is a lifecycle method that runs during server rendering.
13 UNSAFE_componentWillReceiveProps()

Used to call when the component receives new props.
14 UNSAFE_componentWillUpdate()

Call it before rendering with the new props or state.
15 createElement()

Create a React element for an alternative to writing JSX.
16 createRef()

Creates a ref object to contain arbitrary value.

Test Utilities

Test Utilities are used to make it easy to test React components in the testing framework of your choice. In this section we have included some function to do perform testing.

S.No Function & Description
1 act()

To wrap code that interacts with component.
2 mockComponent()

To create a mock version of a React component.
3 isElement()

Checks if a given object is a React element.
4 isElementOfType()

Checks if a given object is an element of a specific type.
5 isDOMComponent()

Checks if a given object is a DOM component.
6 isCompositeComponent()

Checks if a given object is a composite component.
7 isCompositeComponentWithType()

Checks given object is a composite component of a specific type.
8 findAllInRenderedTree()

Finds all rendered instances of a component in tree.
9 scryRenderedDOMComponentsWithClass()

Finds all DOM components with a specific class.
10 findRenderedDOMComponentWithClass()

Finds the first DOM component with a specific class in the rendered tree.
11 scryRenderedDOMComponentsWithTag()

Finds all DOM components with a specific tag.
12 findRenderedDOMComponentWithTag()

Finds the first DOM component with a specific tag.
13 scryRenderedComponentsWithType()

Finds all composite components of a specific type.
14 findRenderedComponentWithType()

Finds the first composite component of a specific type.
15 renderIntoDocument()

Renders a React component into the DOM.
16 Simulate()

Used to simulate user interactions.

Test Renderer

The Test Renderer is a utility for rendering React components to pure JavaScript objects, without the need for a DOM. In this section we have included some functions for this utility.

S.No Function & Description
1 TestRenderer.create()

Renders a React component in a test renderer instance.
2 TestRenderer.act()

Executes interactions with the test renderer.
3 testRenderer.toJSON()

Returns a JSON representation of the rendered component tree.
4 testRenderer.toTree()

Returns a tree structure showing the rendered component tree.
5 testRenderer.update()

Manually triggers an update on the rendered component.
6 testRenderer.unmount()

Unmounts the rendered component.
7 testRenderer.getInstance()

Returns the instance of the root component.
8 testRenderer.root()

Provides access to the root node of the component tree.
9 testInstance.find()

Finds nodes in the component tree.
10 testInstance.findByType()

Finds nodes in the component tree as per their type.
11 testInstance.findByProps()

Finds nodes in the component tree as per their props.
12 testInstance.findAll()

Finds all nodes in the component tree.
13 testInstance.findAllByType()

Finds all nodes in the component tree based on their type.
14 testInstance.findAllByProps()

Finds all nodes as per their props.
15 testInstance.instance

Represents the actual instance of the component.
16 testInstance.type

Represents the type of the component.
17 testInstance.props

Represents the props passed to the component.
18 testInstance.parent

Represents the parent node in the component tree.
19 testInstance.children

Shows the children nodes in the component tree.
Advertisements