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.NoFunction & Description
1use()

Lets us read the value of a resource.

2useDebugValue()

Add a label to a custom Hook.

3useDeferredValue()

Lets us defer updating a portion of the User Interface.

4useId()

Use for generating unique IDs.

5useImperativeHandle()

Helps us connect with a child component.

6useInsertionEffect()

Allows us for inserting elements into the DOM.

7useLayoutEffect()

Used to perform the layout measurements.

8useSyncExternalStore()

Lets us subscribe to an external store.

9useTransition()

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.NoFunction & 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.NoFunction & Description
1cache()

Cache the result of a data fetch.

2createContext()

It creates a context that components can provide.

3lazy()

Allows us to delay loading a component's code.

4startTransition()

Update the state without blocking the UI.

Directives

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

S.NoFunction & Description
1use client

Used to mark what code runs on the client.

2use 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.NoFunction & Description
1useFormState()

Update state as per the result of a form action.

2useFormStatus()

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.NoFunction & Description
1event object

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

2AnimationEvent handler

An event handler type for the CSS animation events.

3ClipboardEvent handler

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

4CompositionEvent handler

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

5DragEvent handler

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

6FocusEvent handler

An event handler type for the focus events.

7InputEvent handler

An event handler type for the onBeforeInput event.

8KeyboardEvent handler

Handles events for keyboard events.

9MouseEvent handler

An event handler type for mouse events.

10PointerEvent handler

It is an event handler type for pointer events.

11TouchEvent handler

Event handler type for touch events.

12TransitionEvent handler

An event handler type for the CSS transition events.

13UIEvent handler

Event handler type for generic User Interface events.

14WheelEvent 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.NoFunction & Description
1createPortal()

Get the current Axes instance.

2flushSync()

Create a new Axes instance.

3findDOMNode()

Close the current figure.

4createRoot()

Clear the current figure.

5hydrateRoot()

Check if a figure with a given figure number exists.

6renderToReadableStream()

Create a new figure.

7renderToString()

Get the current figure.

8renderToStaticMarkup()

Get the labels of all figures.

9cloneElement()

Set the current Axes instance to a given axes.

10isValidElement()

Add contour labels to a contour plot.

11PureComponent

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.NoFunction & Description
1componentDidCatch()

Used to call when some child component throws an error.

2componentDidUpdate()

Used to call immediately after component has been re−rendered.

3componentWillUnmount()

Call it before your component is removed.

4forceUpdate()

Forces a component to re-render.

5getChildContext()

Specify the values for the legacy context.

6getSnapshotBeforeUpdate()

Enables your component to capture some information.

7static contextType

Lets us specify which legacy context is consumed.

8static defaultProps

Used to set the default props for the class.

9static propTypes

To declare the types of the props accepted by your component.

10static getDerivedStateFromError()

Call it when a child component throws an error during rendering.

11static getDerivedStateFromProps()

Used to call it right before calling render.

12UNSAFE_componentWillMount()

It is a lifecycle method that runs during server rendering.

13UNSAFE_componentWillReceiveProps()

Used to call when the component receives new props.

14UNSAFE_componentWillUpdate()

Call it before rendering with the new props or state.

15createElement()

Create a React element for an alternative to writing JSX.

16createRef()

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.NoFunction & Description
1act()

To wrap code that interacts with component.

2mockComponent()

To create a mock version of a React component.

3isElement()

Checks if a given object is a React element.

4isElementOfType()

Checks if a given object is an element of a specific type.

5isDOMComponent()

Checks if a given object is a DOM component.

6isCompositeComponent()

Checks if a given object is a composite component.

7isCompositeComponentWithType()

Checks given object is a composite component of a specific type.

8findAllInRenderedTree()

Finds all rendered instances of a component in tree.

9scryRenderedDOMComponentsWithClass()

Finds all DOM components with a specific class.

10findRenderedDOMComponentWithClass()

Finds the first DOM component with a specific class in the rendered tree.

11scryRenderedDOMComponentsWithTag()

Finds all DOM components with a specific tag.

12findRenderedDOMComponentWithTag()

Finds the first DOM component with a specific tag.

13scryRenderedComponentsWithType()

Finds all composite components of a specific type.

14findRenderedComponentWithType()

Finds the first composite component of a specific type.

15renderIntoDocument()

Renders a React component into the DOM.

16Simulate()

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.NoFunction & Description
1TestRenderer.create()

Renders a React component in a test renderer instance.

2TestRenderer.act()

Executes interactions with the test renderer.

3testRenderer.toJSON()

Returns a JSON representation of the rendered component tree.

4testRenderer.toTree()

Returns a tree structure showing the rendered component tree.

5testRenderer.update()

Manually triggers an update on the rendered component.

6testRenderer.unmount()

Unmounts the rendered component.

7testRenderer.getInstance()

Returns the instance of the root component.

8testRenderer.root()

Provides access to the root node of the component tree.

9testInstance.find()

Finds nodes in the component tree.

10testInstance.findByType()

Finds nodes in the component tree as per their type.

11testInstance.findByProps()

Finds nodes in the component tree as per their props.

12testInstance.findAll()

Finds all nodes in the component tree.

13testInstance.findAllByType()

Finds all nodes in the component tree based on their type.

14testInstance.findAllByProps()

Finds all nodes as per their props.

15testInstance.instance

Represents the actual instance of the component.

16testInstance.type

Represents the type of the component.

17testInstance.props

Represents the props passed to the component.

18testInstance.parent

Represents the parent node in the component tree.

19testInstance.children

Shows the children nodes in the component tree.