React Hooks in SPFx

This article provides steps to use the React Hooks in the SharePoint Framework (SPFx) project.
React Hooks allow function components to use state and lifecycle features from React class components. Hooks make it easier to reuse logic without class-based syntax.

Why React Hooks

Hooks let you use React features like state or lifecycle methods without writing a class. They simplify your component logic and improve code readability and maintainability.

Install Dependencies

Install the required libraries and dependencies.

npm install @types/react --save-dev
npm install @types/react-dom --save-dev

Function Component and React Props

Below is a simple example of a React Function Component with props in SPFx.

import * as React from 'react';
import { ISpFxReactHooksProps } from './ISpFxReactHooksProps';

const SpFxReactHooks: React.FC<ISpFxReactHooksProps> = (props) => {
  return (
    <div>
      <span>{props.description}</span>
    </div>
  );
};

export default SpFxReactHooks;

useState Hook

The useState hook lets you add state to a function component.

import * as React from 'react';
import { ISpFxReactHooksProps } from './ISpFxReactHooksProps';
import { PrimaryButton } from 'office-ui-fabric-react/lib/Button';

const SimpleHooks: React.FC<ISpFxReactHooksProps> = () => {
  const [name, setName] = React.useState('You have');
  
  return (
    <div>
      <PrimaryButton text="Primary" onClick={() => setName('New first name')} />
      <div>{name}</div>
    </div>
  );
};

export default SimpleHooks;

useEffect Hook

The useEffect hook runs side effects in your component, such as fetching data or manually changing the DOM. It runs after render and can optionally clean up effects.

import * as React from 'react';
import { ISpFxReactHooksProps } from './ISpFxReactHooksProps';
import { PrimaryButton } from 'office-ui-fabric-react/lib/Button';

const SimpleHooks: React.FC<ISpFxReactHooksProps> = () => {
  const [firstName, setFirstName] = React.useState('You have');
  const [lastName, setLastName] = React.useState('Last Name');

  React.useEffect(() => {
    console.log(`Name changed: ${firstName} ${lastName}`);
  }, [firstName, lastName]);

  return (
    <div>
      <div>{`${firstName} ${lastName}`}</div>
      <PrimaryButton text="Change Name" onClick={() => setFirstName('New First Name')} />
    </div>
  );
};

export default SimpleHooks;

Advanced Hook Example — Async Operations

Below example shows how to perform asynchronous operations (like data fetching) inside hooks.

import * as React from 'react';
import { ISpFxReactHooksProps } from './ISpFxReactHooksProps';
import { sp } from '@pnp/sp/presets/all';

const SimpleHooks: React.FC<ISpFxReactHooksProps> = (props) => {
  const [fruits, setFruits] = React.useState<string[]>([]);

  React.useEffect(() => {
    const getFruits = async () => {
      const items = await sp.web.lists.getByTitle('Fruits').items.select('Title').get();
      const fruitNames = items.map(i => i.Title);
      setFruits(fruitNames);
    };
    getFruits();
  }, []);

  return (
    <div>
      <h3>Available Fruits</h3>
      <ul>
        {fruits.map((f, i) => (
          <li key={i}>{f}</li>
        ))}
      </ul>
    </div>
  );
};

export default SimpleHooks;

Deploy the Solution

Once complete, build and package your SPFx solution.

gulp build
gulp bundle --ship
gulp package-solution --ship

Upload the generated .sppkg file to your SharePoint App Catalog and deploy the app to your site.

📂 GitHub Source

View full SPFx project on GitHub:React Hooks in SPFx

GitHub

Summary

useState manages component state.
useEffect handles side effects like fetching or subscriptions.
Hooks simplify React code inside SPFx web parts.

If you have any questions, feel free to comment below.
Happy coding!