diff --git a/__mocks__/_failing_page.js b/__mocks__/_failing_page.js
index 790168776..5c5ecb121 100644
--- a/__mocks__/_failing_page.js
+++ b/__mocks__/_failing_page.js
@@ -1,4 +1,7 @@
 export default {
+  cleanup: () => {
+    // Intentionally empty
+  },
   commonObjs: {
     get: () => {
       // Intentionally empty
diff --git a/src/Outline.jsx b/src/Outline.jsx
index e0a7065c7..1524e7805 100644
--- a/src/Outline.jsx
+++ b/src/Outline.jsx
@@ -1,4 +1,4 @@
-import React, { PureComponent } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import PropTypes from 'prop-types';
 import makeCancellable from 'make-cancellable-promise';
 import makeEventProps from 'make-event-props';
@@ -15,101 +15,93 @@ import { cancelRunningTask } from './shared/utils';
 
 import { eventProps, isClassName, isPdf, isRef } from './shared/propTypes';
 
-export class OutlineInternal extends PureComponent {
-  state = {
-    outline: null,
-  };
+export function OutlineInternal({
+  className,
+  inputRef,
+  onItemClick: onItemClickProps,
+  onLoadError: onLoadErrorProps,
+  onLoadSuccess: onLoadSuccessProps,
+  pdf,
+  ...otherProps
+}) {
+  const [outline, setOutline] = useState(null);
 
-  componentDidMount() {
-    const { pdf } = this.props;
+  invariant(pdf, 'Attempted to load an outline, but no document was specified.');
 
-    invariant(pdf, 'Attempted to load an outline, but no document was specified.');
+  /**
+   * Called when an outline is read successfully
+   */
+  const onLoadSuccess = useCallback(
+    (nextOutline) => {
+      if (onLoadSuccessProps) {
+        onLoadSuccessProps(nextOutline);
+      }
+    },
+    [onLoadSuccessProps],
+  );
 
-    this.loadOutline();
-  }
+  /**
+   * Called when an outline failed to read successfully
+   */
+  const onLoadError = useCallback(
+    (error) => {
+      setOutline(false);
 
-  componentDidUpdate(prevProps) {
-    const { pdf } = this.props;
+      warning(false, error);
+
+      if (onLoadErrorProps) {
+        onLoadErrorProps(error);
+      }
+    },
+    [onLoadErrorProps],
+  );
 
-    if (prevProps.pdf && pdf !== prevProps.pdf) {
-      this.loadOutline();
+  function onItemClick({ dest, pageIndex, pageNumber }) {
+    if (onItemClickProps) {
+      onItemClickProps({
+        dest,
+        pageIndex,
+        pageNumber,
+      });
     }
   }
 
-  componentWillUnmount() {
-    cancelRunningTask(this.runningTask);
+  function resetOutline() {
+    setOutline(null);
   }
 
-  loadOutline = () => {
-    const { pdf } = this.props;
-
-    this.setState((prevState) => {
-      if (!prevState.outline) {
-        return null;
-      }
-      return { outline: null };
-    });
+  useEffect(resetOutline, [pdf]);
 
+  function loadOutline() {
     const cancellable = makeCancellable(pdf.getOutline());
-    this.runningTask = cancellable;
+    const runningTask = cancellable;
 
     cancellable.promise
-      .then((outline) => {
-        this.setState({ outline }, this.onLoadSuccess);
+      .then((nextOutline) => {
+        setOutline(nextOutline);
+        onLoadSuccess(nextOutline);
       })
-      .catch((error) => {
-        this.onLoadError(error);
-      });
-  };
-
-  get childContext() {
-    return {
-      onClick: this.onItemClick,
-    };
-  }
+      .catch(onLoadError);
 
-  get eventProps() {
-    return makeEventProps(this.props, () => this.state.outline);
+    return () => cancelRunningTask(runningTask);
   }
 
-  /**
-   * Called when an outline is read successfully
-   */
-  onLoadSuccess = () => {
-    const { onLoadSuccess } = this.props;
-    const { outline } = this.state;
-
-    if (onLoadSuccess) onLoadSuccess(outline);
-  };
-
-  /**
-   * Called when an outline failed to read successfully
-   */
-  onLoadError = (error) => {
-    this.setState({ outline: false });
-
-    warning(false, error);
+  useEffect(loadOutline, [onLoadError, onLoadSuccess, pdf]);
 
-    const { onLoadError } = this.props;
-
-    if (onLoadError) onLoadError(error);
+  const childContext = {
+    onClick: onItemClick,
   };
 
-  onItemClick = ({ dest, pageIndex, pageNumber }) => {
-    const { onItemClick } = this.props;
-
-    if (onItemClick) {
-      onItemClick({
-        dest,
-        pageIndex,
-        pageNumber,
-      });
-    }
-  };
+  const eventProps = useMemo(
+    () => makeEventProps(otherProps, () => outline),
+    [otherProps, outline],
+  );
 
-  renderOutline() {
-    const { outline } = this.state;
+  if (!outline) {
+    return null;
+  }
 
+  function renderOutline() {
     return (
       <ul>
         {outline.map((item, itemIndex) => (
@@ -122,24 +114,11 @@ export class OutlineInternal extends PureComponent {
     );
   }
 
-  render() {
-    const { pdf } = this.props;
-    const { outline } = this.state;
-
-    if (!pdf || !outline) {
-      return null;
-    }
-
-    const { className, inputRef } = this.props;
-
-    return (
-      <div className={clsx('react-pdf__Outline', className)} ref={inputRef} {...this.eventProps}>
-        <OutlineContext.Provider value={this.childContext}>
-          {this.renderOutline()}
-        </OutlineContext.Provider>
-      </div>
-    );
-  }
+  return (
+    <div className={clsx('react-pdf__Outline', className)} ref={inputRef} {...eventProps}>
+      <OutlineContext.Provider value={childContext}>{renderOutline()}</OutlineContext.Provider>
+    </div>
+  );
 }
 
 OutlineInternal.propTypes = {
diff --git a/src/Outline.spec.jsx b/src/Outline.spec.jsx
index 491f0b8bb..235e332bd 100644
--- a/src/Outline.spec.jsx
+++ b/src/Outline.spec.jsx
@@ -58,6 +58,7 @@ describe('Outline', () => {
       const { rerender } = render(<Outline onLoadSuccess={onLoadSuccess} pdf={pdf} />);
 
       expect.assertions(2);
+
       await expect(onLoadSuccessPromise).resolves.toMatchObject(desiredLoadedOutline);
 
       const { func: onLoadSuccess2, promise: onLoadSuccessPromise2 } = makeAsyncCallback();
diff --git a/src/OutlineItem.jsx b/src/OutlineItem.jsx
index 4f705918b..d26b4da9d 100644
--- a/src/OutlineItem.jsx
+++ b/src/OutlineItem.jsx
@@ -1,4 +1,4 @@
-import React, { PureComponent } from 'react';
+import React, { useRef } from 'react';
 import PropTypes from 'prop-types';
 
 import DocumentContext from './DocumentContext';
@@ -10,87 +10,68 @@ import { isDefined } from './shared/utils';
 
 import { isPdf } from './shared/propTypes';
 
-export class OutlineItemInternal extends PureComponent {
-  getDestination = () =>
-    new Promise((resolve, reject) => {
-      if (isDefined(this.destination)) {
-        resolve(this.destination);
-        return;
-      }
-
-      const { item, pdf } = this.props;
-
-      if (typeof item.dest === 'string') {
-        pdf.getDestination(item.dest).then(resolve).catch(reject);
-      } else {
-        resolve(item.dest);
-      }
-    }).then((destination) => {
-      this.destination = destination;
-      return destination;
-    });
-
-  getPageIndex = () =>
-    new Promise((resolve, reject) => {
-      const { pdf } = this.props;
-      if (isDefined(this.pageIndex)) {
-        resolve(this.pageIndex);
-        return;
-      }
-
-      this.getDestination().then((destination) => {
-        if (!destination) {
-          return;
-        }
-
-        const [ref] = destination;
-        pdf.getPageIndex(new Ref(ref)).then(resolve).catch(reject);
-      });
-    }).then((pageIndex) => {
-      this.pageIndex = pageIndex;
-      return this.pageIndex;
-    });
-
-  getPageNumber = () =>
-    new Promise((resolve, reject) => {
-      if (isDefined(this.pageNumber)) {
-        resolve(this.pageNumber);
-        return;
-      }
-
-      this.getPageIndex()
-        .then((pageIndex) => {
-          resolve(pageIndex + 1);
-        })
-        .catch(reject);
-    }).then((pageNumber) => {
-      this.pageNumber = pageNumber;
-      return pageNumber;
-    });
-
-  onClick = (event) => {
-    const { onClick } = this.props;
+function useCachedValue(getter) {
+  const ref = useRef();
 
+  if (isDefined(ref.current)) {
+    return () => ref.current;
+  }
+
+  return () => {
+    const value = getter();
+
+    ref.current = value;
+
+    return value;
+  };
+}
+
+export function OutlineItemInternal({ item, onClick: onClickProps, pdf, ...otherProps }) {
+  const getDestination = useCachedValue(() => {
+    if (typeof item.dest === 'string') {
+      return pdf.getDestination(item.dest);
+    }
+
+    return item.dest;
+  });
+
+  const getPageIndex = useCachedValue(async () => {
+    const destination = await getDestination();
+
+    if (!destination) {
+      return;
+    }
+
+    const [ref] = destination;
+
+    return pdf.getPageIndex(new Ref(ref));
+  });
+
+  const getPageNumber = useCachedValue(async () => {
+    const pageIndex = await getPageIndex();
+
+    return pageIndex + 1;
+  });
+
+  function onClick(event) {
     event.preventDefault();
 
-    if (!onClick) {
+    if (!onClickProps) {
       return false;
     }
 
-    return Promise.all([this.getDestination(), this.getPageIndex(), this.getPageNumber()]).then(
+    return Promise.all([getDestination(), getPageIndex(), getPageNumber()]).then(
       ([dest, pageIndex, pageNumber]) => {
-        onClick({
+        onClickProps({
           dest,
           pageIndex,
           pageNumber,
         });
       },
     );
-  };
-
-  renderSubitems() {
-    const { item, ...otherProps } = this.props;
+  }
 
+  function renderSubitems() {
     if (!item.items || !item.items.length) {
       return null;
     }
@@ -103,6 +84,8 @@ export class OutlineItemInternal extends PureComponent {
           <OutlineItemInternal
             key={typeof subitem.destination === 'string' ? subitem.destination : subitemIndex}
             item={subitem}
+            onClick={onClickProps}
+            pdf={pdf}
             {...otherProps}
           />
         ))}
@@ -110,19 +93,15 @@ export class OutlineItemInternal extends PureComponent {
     );
   }
 
-  render() {
-    const { item } = this.props;
-
-    return (
-      <li>
-        {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
-        <a href="#" onClick={this.onClick}>
-          {item.title}
-        </a>
-        {this.renderSubitems()}
-      </li>
-    );
-  }
+  return (
+    <li>
+      {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
+      <a href="#" onClick={onClick}>
+        {item.title}
+      </a>
+      {renderSubitems()}
+    </li>
+  );
 }
 
 const isDestination = PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.any)]);
diff --git a/src/Page.jsx b/src/Page.jsx
index dd43ec656..74b6ee4e8 100644
--- a/src/Page.jsx
+++ b/src/Page.jsx
@@ -1,4 +1,4 @@
-import React, { createRef, PureComponent } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
 import makeCancellable from 'make-cancellable-promise';
 import makeEventProps from 'make-event-props';
@@ -31,181 +31,96 @@ import {
 
 const defaultScale = 1;
 
-export class PageInternal extends PureComponent {
-  state = {
-    page: null,
-  };
-
-  pageElement = createRef();
-
-  componentDidMount() {
-    const { pdf } = this.props;
-
-    invariant(pdf, 'Attempted to load a page, but no document was specified.');
-
-    this.loadPage();
-  }
-
-  componentDidUpdate(prevProps) {
-    const { pdf } = this.props;
-
-    if (
-      (prevProps.pdf && pdf !== prevProps.pdf) ||
-      this.getPageNumber() !== this.getPageNumber(prevProps)
-    ) {
-      const { unregisterPage } = this.props;
-
-      if (unregisterPage) unregisterPage(this.getPageIndex(prevProps));
-
-      this.loadPage();
+export function PageInternal({
+  canvasBackground,
+  canvasRef,
+  children,
+  className,
+  customTextRenderer,
+  devicePixelRatio,
+  error,
+  height,
+  inputRef,
+  loading,
+  noData,
+  onGetAnnotationsError: onGetAnnotationsErrorProps,
+  onGetAnnotationsSuccess: onGetAnnotationsSuccessProps,
+  onGetTextError: onGetTextErrorProps,
+  onGetTextSuccess: onGetTextSuccessProps,
+  onLoadError: onLoadErrorProps,
+  onLoadSuccess: onLoadSuccessProps,
+  onRenderAnnotationLayerError: onRenderAnnotationLayerErrorProps,
+  onRenderAnnotationLayerSuccess: onRenderAnnotationLayerSuccessProps,
+  onRenderError: onRenderErrorProps,
+  onRenderSuccess: onRenderSuccessProps,
+  onRenderTextLayerError: onRenderTextLayerErrorProps,
+  onRenderTextLayerSuccess: onRenderTextLayerSuccessProps,
+  pageIndex: pageIndexProps,
+  pageNumber: pageNumberProps,
+  pdf,
+  registerPage,
+  renderAnnotationLayer: renderAnnotationLayerProps,
+  renderForms,
+  renderInteractiveForms,
+  renderMode,
+  renderTextLayer: renderTextLayerProps,
+  rotate: rotateProps,
+  scale: scaleProps,
+  unregisterPage,
+  width,
+  ...otherProps
+}) {
+  const [page, setPage] = useState(null);
+  const pageElement = useRef();
+
+  invariant(pdf, 'Attempted to load a page, but no document was specified.');
+
+  const pageIndex = (() => {
+    if (isProvided(pageNumberProps)) {
+      return pageNumberProps - 1;
     }
-  }
-
-  componentWillUnmount() {
-    const { unregisterPage } = this.props;
-
-    if (unregisterPage) unregisterPage(this.pageIndex);
 
-    cancelRunningTask(this.runningTask);
-  }
-
-  get childContext() {
-    const { pageIndex, pageNumber } = this;
-    const { page } = this.state;
-
-    if (!page) {
-      return {};
-    }
-
-    const {
-      canvasBackground,
-      customTextRenderer,
-      devicePixelRatio,
-      onGetAnnotationsError,
-      onGetAnnotationsSuccess,
-      onGetTextError,
-      onGetTextSuccess,
-      onRenderAnnotationLayerError,
-      onRenderAnnotationLayerSuccess,
-      onRenderError,
-      onRenderSuccess,
-      onRenderTextLayerError,
-      onRenderTextLayerSuccess,
-      renderForms,
-      renderInteractiveForms,
-    } = this.props;
-
-    return {
-      canvasBackground,
-      customTextRenderer,
-      devicePixelRatio,
-      onGetAnnotationsError,
-      onGetAnnotationsSuccess,
-      onGetTextError,
-      onGetTextSuccess,
-      onRenderAnnotationLayerError,
-      onRenderAnnotationLayerSuccess,
-      onRenderError,
-      onRenderSuccess,
-      onRenderTextLayerError,
-      onRenderTextLayerSuccess,
-      page,
-      pageIndex,
-      pageNumber,
-      renderForms: renderForms ?? renderInteractiveForms, // For backward compatibility
-      rotate: this.rotate,
-      scale: this.scale,
-    };
-  }
-
-  /**
-   * Called when a page is loaded successfully
-   */
-  onLoadSuccess = () => {
-    const { onLoadSuccess, registerPage } = this.props;
-    const { page } = this.state;
-
-    if (onLoadSuccess) onLoadSuccess(makePageCallback(page, this.scale));
-
-    if (registerPage) registerPage(this.pageIndex, this.pageElement.current);
-  };
-
-  /**
-   * Called when a page failed to load
-   */
-  onLoadError = (error) => {
-    this.setState({ page: false });
-
-    warning(false, error);
-
-    const { onLoadError } = this.props;
-
-    if (onLoadError) onLoadError(error);
-  };
-
-  getPageIndex(props = this.props) {
-    if (isProvided(props.pageNumber)) {
-      return props.pageNumber - 1;
-    }
-
-    if (isProvided(props.pageIndex)) {
-      return props.pageIndex;
+    if (isProvided(pageIndexProps)) {
+      return pageIndexProps;
     }
 
     return null;
-  }
+  })();
 
-  getPageNumber(props = this.props) {
-    if (isProvided(props.pageNumber)) {
-      return props.pageNumber;
+  const pageNumber = (() => {
+    if (isProvided(pageNumberProps)) {
+      return pageNumberProps;
     }
 
-    if (isProvided(props.pageIndex)) {
-      return props.pageIndex + 1;
+    if (isProvided(pageIndexProps)) {
+      return pageIndexProps + 1;
     }
 
     return null;
-  }
-
-  get pageIndex() {
-    return this.getPageIndex();
-  }
-
-  get pageNumber() {
-    return this.getPageNumber();
-  }
+  })();
 
-  get rotate() {
-    const { rotate } = this.props;
-
-    if (isProvided(rotate)) {
-      return rotate;
+  const rotate = (() => {
+    if (isProvided(rotateProps)) {
+      return rotateProps;
     }
 
-    const { page } = this.state;
-
     if (!page) {
       return null;
     }
 
     return page.rotate;
-  }
-
-  get scale() {
-    const { page } = this.state;
+  })();
 
+  const scale = (() => {
     if (!page) {
       return null;
     }
 
-    const { scale, width, height } = this.props;
-    const { rotate } = this;
-
     // Be default, we'll render page at 100% * scale width.
     let pageScale = 1;
 
     // Passing scale explicitly null would cause the page not to render
-    const scaleWithDefault = scale === null ? defaultScale : scale;
+    const scaleWithDefault = scaleProps === null ? defaultScale : scaleProps;
 
     // If width/height is defined, calculate the scale of the page so it could be of desired width.
     if (width || height) {
@@ -214,83 +129,137 @@ export class PageInternal extends PureComponent {
     }
 
     return scaleWithDefault * pageScale;
-  }
+  })();
 
-  get eventProps() {
-    return makeEventProps(this.props, () => {
-      const { page } = this.state;
-      if (!page) {
-        return page;
+  function hook() {
+    return () => {
+      if (unregisterPage) {
+        unregisterPage(pageIndex);
       }
-
-      return makePageCallback(page, this.scale);
-    });
+    };
   }
 
-  get pageKey() {
-    return `${this.pageIndex}@${this.scale}/${this.rotate}`;
-  }
+  useEffect(hook, [pdf, pageIndex, unregisterPage]);
 
-  get pageKeyNoScale() {
-    return `${this.pageIndex}/${this.rotate}`;
-  }
+  /**
+   * Called when a page is loaded successfully
+   */
+  const onLoadSuccess = useCallback(() => {
+    if (onLoadSuccessProps) {
+      onLoadSuccessProps(makePageCallback(page, scale));
+    }
+  }, [onLoadSuccessProps, page, scale]);
+
+  useEffect(() => {
+    if (page) {
+      onLoadSuccess();
+    }
+  }, [onLoadSuccess, page]);
+
+  /**
+   * Called when a page failed to load
+   */
+  const onLoadError = useCallback(
+    (error) => {
+      warning(false, error);
+
+      if (onLoadErrorProps) {
+        onLoadErrorProps(error);
+      }
+    },
+    [onLoadErrorProps],
+  );
 
-  loadPage = () => {
-    const { pdf } = this.props;
+  function resetPage() {
+    setPage(null);
+  }
 
-    const pageNumber = this.getPageNumber();
+  useEffect(resetPage, [pdf, pageIndex]);
 
+  function loadPage() {
     if (!pageNumber) {
       return;
     }
 
-    this.setState((prevState) => {
-      if (!prevState.page) {
-        return null;
-      }
-      return { page: null };
-    });
-
     const cancellable = makeCancellable(pdf.getPage(pageNumber));
-    this.runningTask = cancellable;
+    const runningTask = cancellable;
 
     cancellable.promise
-      .then((page) => {
-        this.setState({ page }, this.onLoadSuccess);
+      .then((nextPage) => {
+        setPage(nextPage);
+
+        if (registerPage) {
+          registerPage(pageIndex, pageElement.current);
+        }
       })
       .catch((error) => {
-        this.onLoadError(error);
+        setPage(false);
+        onLoadError(error);
       });
-  };
 
-  renderMainLayer() {
-    const { canvasRef, renderMode } = this.props;
+    return () => cancelRunningTask(runningTask);
+  }
 
+  useEffect(loadPage, [pdf, onLoadError, onLoadSuccess, pageIndex, pageNumber, registerPage]);
+
+  const childContext = page
+    ? {
+        canvasBackground,
+        customTextRenderer,
+        devicePixelRatio,
+        onGetAnnotationsError: onGetAnnotationsErrorProps,
+        onGetAnnotationsSuccess: onGetAnnotationsSuccessProps,
+        onGetTextError: onGetTextErrorProps,
+        onGetTextSuccess: onGetTextSuccessProps,
+        onRenderAnnotationLayerError: onRenderAnnotationLayerErrorProps,
+        onRenderAnnotationLayerSuccess: onRenderAnnotationLayerSuccessProps,
+        onRenderError: onRenderErrorProps,
+        onRenderSuccess: onRenderSuccessProps,
+        onRenderTextLayerError: onRenderTextLayerErrorProps,
+        onRenderTextLayerSuccess: onRenderTextLayerSuccessProps,
+        page,
+        pageIndex,
+        pageNumber,
+        renderForms: renderForms ?? renderInteractiveForms, // For backward compatibility
+        rotate: rotate,
+        scale: scale,
+      }
+    : null;
+
+  const eventProps = makeEventProps(otherProps, () => {
+    if (!page) {
+      return null;
+    }
+
+    return makePageCallback(page, scale);
+  });
+
+  const pageKey = `${pageIndex}@${scale}/${rotate}`;
+
+  const pageKeyNoScale = `${pageIndex}/${rotate}`;
+
+  function renderMainLayer() {
     switch (renderMode) {
       case 'none':
         return null;
       case 'svg':
-        return <PageSVG key={`${this.pageKeyNoScale}_svg`} />;
+        return <PageSVG key={`${pageKeyNoScale}_svg`} />;
       case 'canvas':
       default:
-        return <PageCanvas key={`${this.pageKey}_canvas`} canvasRef={canvasRef} />;
+        return <PageCanvas key={`${pageKey}_canvas`} canvasRef={canvasRef} />;
     }
   }
 
-  renderTextLayer() {
-    const { renderTextLayer } = this.props;
-
-    if (!renderTextLayer) {
+  function renderTextLayer() {
+    if (!renderTextLayerProps) {
       return null;
     }
 
-    return <TextLayer key={`${this.pageKey}_text`} />;
+    return <TextLayer key={`${pageKey}_text`} />;
   }
 
-  renderAnnotationLayer() {
-    const { renderAnnotationLayer } = this.props;
-
-    if (!renderAnnotationLayer) {
+  function renderAnnotationLayer() {
+    if (!renderAnnotationLayerProps) {
       return null;
     }
 
@@ -298,71 +267,53 @@ export class PageInternal extends PureComponent {
      * As of now, PDF.js 2.0.943 returns warnings on unimplemented annotations in SVG mode.
      * Therefore, as a fallback, we render "traditional" AnnotationLayer component.
      */
-
-    return <AnnotationLayer key={`${this.pageKey}_annotations`} />;
+    return <AnnotationLayer key={`${pageKey}_annotations`} />;
   }
 
-  renderChildren() {
-    const { children } = this.props;
-
+  function renderChildren() {
     return (
-      <PageContext.Provider value={this.childContext}>
-        {this.renderMainLayer()}
-        {this.renderTextLayer()}
-        {this.renderAnnotationLayer()}
+      <PageContext.Provider value={childContext}>
+        {renderMainLayer()}
+        {renderTextLayer()}
+        {renderAnnotationLayer()}
         {children}
       </PageContext.Provider>
     );
   }
 
-  renderContent() {
-    const { pageNumber } = this;
-    const { pdf } = this.props;
-    const { page } = this.state;
-
+  function renderContent() {
     if (!pageNumber) {
-      const { noData } = this.props;
-
       return <Message type="no-data">{typeof noData === 'function' ? noData() : noData}</Message>;
     }
 
     if (pdf === null || page === null) {
-      const { loading } = this.props;
-
       return (
         <Message type="loading">{typeof loading === 'function' ? loading() : loading}</Message>
       );
     }
 
     if (pdf === false || page === false) {
-      const { error } = this.props;
-
       return <Message type="error">{typeof error === 'function' ? error() : error}</Message>;
     }
 
-    return this.renderChildren();
+    return renderChildren();
   }
 
-  render() {
-    const { pageNumber } = this;
-    const { className, inputRef } = this.props;
-
-    return (
-      <div
-        className={clsx('react-pdf__Page', className)}
-        data-page-number={pageNumber}
-        ref={mergeRefs(inputRef, this.pageElement)}
-        style={{
-          position: 'relative',
-          minWidth: 'min-content',
-          minHeight: 'min-content',
-        }}
-        {...this.eventProps}
-      >
-        {this.renderContent()}
-      </div>
-    );
-  }
+  return (
+    <div
+      className={clsx('react-pdf__Page', className)}
+      data-page-number={pageNumber}
+      ref={mergeRefs(inputRef, pageElement)}
+      style={{
+        position: 'relative',
+        minWidth: 'min-content',
+        minHeight: 'min-content',
+      }}
+      {...eventProps}
+    >
+      {renderContent()}
+    </div>
+  );
 }
 
 PageInternal.defaultProps = {
diff --git a/src/Page/AnnotationLayer.jsx b/src/Page/AnnotationLayer.jsx
index 3d3db45cf..6fa2ee41b 100644
--- a/src/Page/AnnotationLayer.jsx
+++ b/src/Page/AnnotationLayer.jsx
@@ -1,4 +1,4 @@
-import React, { createRef, PureComponent } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
 import makeCancellable from 'make-cancellable-promise';
 import invariant from 'tiny-invariant';
@@ -12,131 +12,141 @@ import { cancelRunningTask } from '../shared/utils';
 
 import { isLinkService, isPage, isRotate } from '../shared/propTypes';
 
-export class AnnotationLayerInternal extends PureComponent {
-  state = {
-    annotations: null,
-  };
-
-  layerElement = createRef();
-
-  componentDidMount() {
-    const { page } = this.props;
-
-    invariant(page, 'Attempted to load page annotations, but no page was specified.');
-
-    warning(
-      parseInt(
-        window.getComputedStyle(document.body).getPropertyValue('--react-pdf-annotation-layer'),
-        10,
-      ) === 1,
-      'AnnotationLayer styles not found. Read more: https://github.com/wojtekmaj/react-pdf#support-for-annotations',
-    );
-
-    this.loadAnnotations();
-  }
-
-  componentDidUpdate(prevProps) {
-    const { page, renderForms } = this.props;
-
-    if ((prevProps.page && page !== prevProps.page) || renderForms !== prevProps.renderForms) {
-      this.loadAnnotations();
-    }
-  }
-
-  componentWillUnmount() {
-    cancelRunningTask(this.runningTask);
-  }
-
-  loadAnnotations = () => {
-    const { page } = this.props;
-
+export function AnnotationLayerInternal({
+  imageResourcesPath,
+  linkService,
+  onGetAnnotationsError: onGetAnnotationsErrorProps,
+  onGetAnnotationsSuccess: onGetAnnotationsSuccessProps,
+  onRenderAnnotationLayerError: onRenderAnnotationLayerErrorProps,
+  onRenderAnnotationLayerSuccess: onRenderAnnotationLayerSuccessProps,
+  page,
+  renderForms,
+  rotate: rotateProps,
+  scale = 1,
+}) {
+  const [annotations, setAnnotations] = useState(null);
+  const layerElement = useRef();
+
+  invariant(page, 'Attempted to load page annotations, but no page was specified.');
+
+  warning(
+    parseInt(
+      window.getComputedStyle(document.body).getPropertyValue('--react-pdf-annotation-layer'),
+      10,
+    ) === 1,
+    'AnnotationLayer styles not found. Read more: https://github.com/wojtekmaj/react-pdf#support-for-annotations',
+  );
+
+  const onLoadSuccess = useCallback(
+    (nextAnnotations) => {
+      if (onGetAnnotationsSuccessProps) {
+        onGetAnnotationsSuccessProps(nextAnnotations);
+      }
+    },
+    [onGetAnnotationsSuccessProps],
+  );
+
+  const onLoadError = useCallback(
+    (error) => {
+      setAnnotations(false);
+
+      warning(false, error);
+
+      if (onGetAnnotationsErrorProps) onGetAnnotationsErrorProps(error);
+    },
+    [onGetAnnotationsErrorProps],
+  );
+
+  function loadAnnotations() {
     const cancellable = makeCancellable(page.getAnnotations());
-    this.runningTask = cancellable;
+    const runningTask = cancellable;
 
     cancellable.promise
-      .then((annotations) => {
-        this.setState({ annotations }, this.onLoadSuccess);
+      .then((nextAnnotations) => {
+        setAnnotations(nextAnnotations);
+        onLoadSuccess(nextAnnotations);
       })
       .catch((error) => {
-        this.onLoadError(error);
+        onLoadError(error);
       });
-  };
-
-  onLoadSuccess = () => {
-    const { onGetAnnotationsSuccess } = this.props;
-    const { annotations } = this.state;
-
-    if (onGetAnnotationsSuccess) onGetAnnotationsSuccess(annotations);
-  };
-
-  onLoadError = (error) => {
-    this.setState({ annotations: false });
 
-    warning(false, error);
-
-    const { onGetAnnotationsError } = this.props;
-
-    if (onGetAnnotationsError) onGetAnnotationsError(error);
-  };
-
-  onRenderSuccess = () => {
-    const { onRenderAnnotationLayerSuccess } = this.props;
-
-    if (onRenderAnnotationLayerSuccess) onRenderAnnotationLayerSuccess();
-  };
-
-  onRenderError = (error) => {
-    warning(false, error);
-
-    const { onRenderAnnotationLayerError } = this.props;
-
-    if (onRenderAnnotationLayerError) onRenderAnnotationLayerError(error);
-  };
-
-  get viewport() {
-    const { page, rotate, scale } = this.props;
-
-    return page.getViewport({ scale, rotation: rotate });
+    return () => {
+      cancelRunningTask(runningTask);
+    };
   }
 
-  renderAnnotationLayer() {
-    const { annotations } = this.state;
+  useEffect(loadAnnotations, [page, onLoadError, onLoadSuccess, renderForms]);
 
+  const onRenderSuccess = useCallback(() => {
+    if (onRenderAnnotationLayerSuccessProps) {
+      onRenderAnnotationLayerSuccessProps();
+    }
+  }, [onRenderAnnotationLayerSuccessProps]);
+
+  const onRenderError = useCallback(
+    (error) => {
+      warning(false, error);
+      if (onRenderAnnotationLayerErrorProps) {
+        onRenderAnnotationLayerErrorProps(error);
+      }
+    },
+    [onRenderAnnotationLayerErrorProps],
+  );
+
+  const viewport = useMemo(
+    () => page.getViewport({ scale, rotation: rotateProps }),
+    [page, scale, rotateProps],
+  );
+
+  function renderAnnotationLayer() {
     if (!annotations) {
       return;
     }
 
-    const { imageResourcesPath, linkService, page, renderForms } = this.props;
+    const { current: layer } = layerElement;
+
+    if (!layer) {
+      return null;
+    }
 
-    const viewport = this.viewport.clone({ dontFlip: true });
+    const clonedViewport = viewport.clone({ dontFlip: true });
 
     const parameters = {
       annotations,
-      div: this.layerElement.current,
+      div: layer,
       imageResourcesPath,
       linkService,
       page,
       renderForms,
-      viewport,
+      viewport: clonedViewport,
     };
 
-    this.layerElement.current.innerHTML = '';
+    layer.innerHTML = '';
 
     try {
       pdfjs.AnnotationLayer.render(parameters);
-      this.onRenderSuccess();
+      onRenderSuccess();
     } catch (error) {
-      this.onRenderError(error);
+      onRenderError(error);
     }
-  }
 
-  render() {
-    return (
-      <div className="react-pdf__Page__annotations annotationLayer" ref={this.layerElement}>
-        {this.renderAnnotationLayer()}
-      </div>
-    );
+    return () => {
+      // TODO: Cancel running task?
+    };
   }
+
+  useEffect(renderAnnotationLayer, [
+    annotations,
+    imageResourcesPath,
+    linkService,
+    onRenderError,
+    onRenderSuccess,
+    page,
+    renderForms,
+    viewport,
+  ]);
+
+  return <div className="react-pdf__Page__annotations annotationLayer" ref={layerElement} />;
 }
 
 AnnotationLayerInternal.propTypes = {
diff --git a/src/Page/PageCanvas.jsx b/src/Page/PageCanvas.jsx
index 624ef5048..5641ab4be 100644
--- a/src/Page/PageCanvas.jsx
+++ b/src/Page/PageCanvas.jsx
@@ -1,4 +1,4 @@
-import React, { createRef, PureComponent } from 'react';
+import React, { createRef, useCallback, useEffect, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import mergeRefs from 'merge-refs';
 import warning from 'tiny-warning';
@@ -6,109 +6,79 @@ import * as pdfjs from 'pdfjs-dist/build/pdf';
 
 import PageContext from '../PageContext';
 
-import { getDevicePixelRatio, isCancelException, makePageCallback } from '../shared/utils';
+import {
+  cancelRunningTask,
+  getDevicePixelRatio,
+  isCancelException,
+  makePageCallback,
+} from '../shared/utils';
 
 import { isPage, isRef, isRotate } from '../shared/propTypes';
 
 const ANNOTATION_MODE = pdfjs.AnnotationMode;
 
-export class PageCanvasInternal extends PureComponent {
-  canvasElement = createRef();
-
-  componentDidMount() {
-    this.drawPageOnCanvas();
-  }
-
-  componentDidUpdate(prevProps) {
-    const { canvasBackground, devicePixelRatio, page, renderForms } = this.props;
-    if (
-      canvasBackground !== prevProps.canvasBackground ||
-      devicePixelRatio !== prevProps.devicePixelRatio ||
-      renderForms !== prevProps.renderForms
-    ) {
-      // Ensures the canvas will be re-rendered from scratch. Otherwise all form data will stay.
-      page.cleanup();
-      this.drawPageOnCanvas();
-    }
-  }
-
-  componentWillUnmount() {
-    this.cancelRenderingTask();
-
-    const { current: canvas } = this.canvasElement;
-
-    /**
-     * Zeroing the width and height cause most browsers to release graphics
-     * resources immediately, which can greatly reduce memory consumption.
-     */
-    if (canvas) {
-      canvas.width = 0;
-      canvas.height = 0;
-    }
-  }
-
-  cancelRenderingTask() {
-    if (this.renderer) {
-      this.renderer.cancel();
-      this.renderer = null;
-    }
-  }
+export function PageCanvasInternal({
+  canvasBackground,
+  canvasRef,
+  devicePixelRatio: devicePixelRatioProps,
+  onRenderError: onRenderErrorProps,
+  onRenderSuccess: onRenderSuccessProps,
+  page,
+  renderForms,
+  rotate: rotateProps,
+  scale,
+}) {
+  const canvasElement = createRef();
+
+  const devicePixelRatio = devicePixelRatioProps || getDevicePixelRatio();
 
   /**
    * Called when a page is rendered successfully.
    */
-  onRenderSuccess = () => {
-    this.renderer = null;
-
-    const { onRenderSuccess, page, scale } = this.props;
-
-    if (onRenderSuccess) onRenderSuccess(makePageCallback(page, scale));
-  };
+  const onRenderSuccess = useCallback(() => {
+    if (onRenderSuccessProps) {
+      onRenderSuccessProps(makePageCallback(page, scale));
+    }
+  }, [onRenderSuccessProps, page, scale]);
 
   /**
    * Called when a page fails to render.
    */
-  onRenderError = (error) => {
-    if (isCancelException(error)) {
-      return;
-    }
-
-    warning(false, error);
-
-    const { onRenderError } = this.props;
-
-    if (onRenderError) onRenderError(error);
-  };
-
-  get devicePixelRatio() {
-    const { devicePixelRatio } = this.props;
-
-    return devicePixelRatio || getDevicePixelRatio();
-  }
-
-  get renderViewport() {
-    const { devicePixelRatio } = this;
-    const { page, rotate, scale } = this.props;
+  const onRenderError = useCallback(
+    (error) => {
+      if (isCancelException(error)) {
+        return;
+      }
+
+      warning(false, error);
+
+      if (onRenderErrorProps) {
+        onRenderErrorProps(error);
+      }
+    },
+    [onRenderErrorProps],
+  );
 
-    return page.getViewport({ scale: scale * devicePixelRatio, rotation: rotate });
-  }
+  const renderViewport = useMemo(
+    () => page.getViewport({ scale: scale * devicePixelRatio, rotation: rotateProps }),
+    [page, rotateProps, scale, devicePixelRatio],
+  );
 
-  get viewport() {
-    const { page, rotate, scale } = this.props;
+  const viewport = useMemo(
+    () => page.getViewport({ scale, rotation: rotateProps }),
+    [page, rotateProps, scale],
+  );
 
-    return page.getViewport({ scale, rotation: rotate });
-  }
+  function drawPageOnCanvas() {
+    // Ensures the canvas will be re-rendered from scratch. Otherwise all form data will stay.
+    page.cleanup();
 
-  drawPageOnCanvas = () => {
-    const { current: canvas } = this.canvasElement;
+    const { current: canvas } = canvasElement;
 
     if (!canvas) {
       return null;
     }
 
-    const { renderViewport, viewport } = this;
-    const { canvasBackground, page, renderForms } = this.props;
-
     canvas.width = renderViewport.width;
     canvas.height = renderViewport.height;
 
@@ -126,30 +96,52 @@ export class PageCanvasInternal extends PureComponent {
       renderContext.background = canvasBackground;
     }
 
-    // If another render is in progress, let's cancel it
-    this.cancelRenderingTask();
-
     const cancellable = page.render(renderContext);
-    this.renderer = cancellable;
-
-    return cancellable.promise.then(this.onRenderSuccess).catch(this.onRenderError);
-  };
-
-  render() {
-    const { canvasRef } = this.props;
-
-    return (
-      <canvas
-        className="react-pdf__Page__canvas"
-        dir="ltr"
-        ref={mergeRefs(canvasRef, this.canvasElement)}
-        style={{
-          display: 'block',
-          userSelect: 'none',
-        }}
-      />
-    );
+    const runningTask = cancellable;
+
+    cancellable.promise.then(onRenderSuccess).catch(onRenderError);
+
+    return () => cancelRunningTask(runningTask);
   }
+
+  useEffect(drawPageOnCanvas, [
+    canvasBackground,
+    canvasElement,
+    devicePixelRatio,
+    onRenderError,
+    onRenderSuccess,
+    page,
+    renderForms,
+    renderViewport,
+    viewport,
+  ]);
+
+  const cleanup = useCallback(() => {
+    const { current: canvas } = canvasElement;
+
+    /**
+     * Zeroing the width and height cause most browsers to release graphics
+     * resources immediately, which can greatly reduce memory consumption.
+     */
+    if (canvas) {
+      canvas.width = 0;
+      canvas.height = 0;
+    }
+  }, [canvasElement]);
+
+  useEffect(() => cleanup, [cleanup]);
+
+  return (
+    <canvas
+      className="react-pdf__Page__canvas"
+      dir="ltr"
+      ref={mergeRefs(canvasRef, canvasElement)}
+      style={{
+        display: 'block',
+        userSelect: 'none',
+      }}
+    />
+  );
 }
 
 PageCanvasInternal.propTypes = {
diff --git a/src/Page/PageSVG.jsx b/src/Page/PageSVG.jsx
index 33f8e9a9e..06df6ed77 100644
--- a/src/Page/PageSVG.jsx
+++ b/src/Page/PageSVG.jsx
@@ -1,76 +1,83 @@
-import React, { PureComponent } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import PropTypes from 'prop-types';
+import makeCancellable from 'make-cancellable-promise';
 import warning from 'tiny-warning';
 import * as pdfjs from 'pdfjs-dist/build/pdf';
 
 import PageContext from '../PageContext';
 
-import { isCancelException, makePageCallback } from '../shared/utils';
+import { cancelRunningTask, isCancelException, makePageCallback } from '../shared/utils';
 
 import { isPage, isRotate } from '../shared/propTypes';
 
-export class PageSVGInternal extends PureComponent {
-  state = {
-    svg: null,
-  };
-
-  componentDidMount() {
-    this.renderSVG();
-  }
+export function PageSVGInternal({
+  onRenderSuccess: onRenderSuccessProps,
+  onRenderError: onRenderErrorProps,
+  page,
+  rotate: rotateProps,
+  scale,
+}) {
+  const [svg, setSvg] = useState(null);
 
   /**
-   * Called when a page is rendered successfully.
+   * Called when a page is rendered successfully
    */
-  onRenderSuccess = () => {
-    this.renderer = null;
-
-    const { onRenderSuccess, page, scale } = this.props;
-
-    if (onRenderSuccess) onRenderSuccess(makePageCallback(page, scale));
-  };
+  const onRenderSuccess = useCallback(() => {
+    if (onRenderSuccessProps) {
+      onRenderSuccessProps(makePageCallback(page, scale));
+    }
+  }, [onRenderSuccessProps, page, scale]);
 
   /**
-   * Called when a page fails to render.
+   * Called when a page fails to render
    */
-  onRenderError = (error) => {
-    if (isCancelException(error)) {
-      return;
-    }
-
-    warning(false, error);
-
-    const { onRenderError } = this.props;
-
-    if (onRenderError) onRenderError(error);
-  };
-
-  get viewport() {
-    const { page, rotate, scale } = this.props;
+  const onRenderError = useCallback(
+    (error) => {
+      if (isCancelException(error)) {
+        return;
+      }
+
+      warning(false, error);
+
+      if (onRenderErrorProps) {
+        onRenderErrorProps(error);
+      }
+    },
+    [onRenderErrorProps],
+  );
 
-    return page.getViewport({ scale, rotation: rotate });
-  }
+  const viewport = useMemo(
+    () => page.getViewport({ scale, rotation: rotateProps }),
+    [page, rotateProps, scale],
+  );
 
-  renderSVG = () => {
-    const { page } = this.props;
+  function renderSVG() {
+    if (svg) {
+      return;
+    }
 
-    this.renderer = page.getOperatorList();
+    const cancellable = makeCancellable(page.getOperatorList());
+    const runningTask = cancellable.promise;
 
-    return this.renderer
+    cancellable.promise
       .then((operatorList) => {
         const svgGfx = new pdfjs.SVGGraphics(page.commonObjs, page.objs);
-        this.renderer = svgGfx
-          .getSVG(operatorList, this.viewport)
-          .then((svg) => {
-            this.setState({ svg }, this.onRenderSuccess);
+        svgGfx
+          .getSVG(operatorList, viewport)
+          .then((nextSvg) => {
+            setSvg(nextSvg);
+            onRenderSuccess();
           })
-          .catch(this.onRenderError);
+          .catch(onRenderError);
       })
-      .catch(this.onRenderError);
-  };
+      .catch(onRenderError);
+
+    return () => cancelRunningTask(runningTask);
+  }
 
-  drawPageOnContainer = (element) => {
-    const { svg } = this.state;
+  useEffect(renderSVG, [onRenderError, onRenderSuccess, page, svg, viewport]);
 
+  function drawPageOnContainer(element) {
     if (!element || !svg) {
       return;
     }
@@ -80,30 +87,29 @@ export class PageSVGInternal extends PureComponent {
       element.appendChild(svg);
     }
 
-    const { width, height } = this.viewport;
+    const { width, height } = viewport;
+
     svg.setAttribute('width', width);
     svg.setAttribute('height', height);
-  };
-
-  render() {
-    const { width, height } = this.viewport;
-
-    return (
-      <div
-        className="react-pdf__Page__svg"
-        // Note: This cannot be shortened, as we need this function to be called with each render.
-        ref={(ref) => this.drawPageOnContainer(ref)}
-        style={{
-          display: 'block',
-          backgroundColor: 'white',
-          overflow: 'hidden',
-          width,
-          height,
-          userSelect: 'none',
-        }}
-      />
-    );
   }
+
+  const { width, height } = viewport;
+
+  return (
+    <div
+      className="react-pdf__Page__svg"
+      // Note: This cannot be shortened, as we need this function to be called with each render.
+      ref={(ref) => drawPageOnContainer(ref)}
+      style={{
+        display: 'block',
+        backgroundColor: 'white',
+        overflow: 'hidden',
+        width,
+        height,
+        userSelect: 'none',
+      }}
+    />
+  );
 }
 
 PageSVGInternal.propTypes = {
diff --git a/src/Page/TextLayer.jsx b/src/Page/TextLayer.jsx
index 611c85616..84df38c20 100644
--- a/src/Page/TextLayer.jsx
+++ b/src/Page/TextLayer.jsx
@@ -1,4 +1,4 @@
-import React, { createRef, PureComponent } from 'react';
+import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
 import makeCancellable from 'make-cancellable-promise';
 import invariant from 'tiny-invariant';
@@ -11,129 +11,132 @@ import { cancelRunningTask } from '../shared/utils';
 
 import { isPage, isRotate } from '../shared/propTypes';
 
-export class TextLayerInternal extends PureComponent {
-  state = {
-    textContent: null,
-  };
-
-  layerElement = createRef();
-
-  endElement = createRef();
-
-  componentDidMount() {
-    const { page } = this.props;
-
-    invariant(page, 'Attempted to load page text content, but no page was specified.');
-
-    warning(
-      parseInt(
-        window.getComputedStyle(document.body).getPropertyValue('--react-pdf-text-layer'),
-        10,
-      ) === 1,
-      'TextLayer styles not found. Read more: https://github.com/wojtekmaj/react-pdf#support-for-text-layer',
-    );
+export function TextLayerInternal({
+  customTextRenderer,
+  onGetTextError,
+  onGetTextSuccess,
+  onRenderTextLayerError,
+  onRenderTextLayerSuccess,
+  page,
+  pageIndex,
+  pageNumber,
+  rotate: rotateProps,
+  scale,
+}) {
+  const [textContent, setTextContent] = useState(null);
+  const layerElement = useRef();
+  const endElement = useRef();
+
+  invariant(page, 'Attempted to load page text content, but no page was specified.');
+
+  warning(
+    parseInt(
+      window.getComputedStyle(document.body).getPropertyValue('--react-pdf-text-layer'),
+      10,
+    ) === 1,
+    'TextLayer styles not found. Read more: https://github.com/wojtekmaj/react-pdf#support-for-text-layer',
+  );
 
-    this.loadTextContent();
-  }
+  /**
+   * Called when a page text content is read successfully
+   */
+  const onLoadSuccess = useCallback(
+    (nextTextContent) => {
+      if (onGetTextSuccess) {
+        onGetTextSuccess(nextTextContent);
+      }
+    },
+    [onGetTextSuccess],
+  );
 
-  componentDidUpdate(prevProps) {
-    const { page } = this.props;
+  /**
+   * Called when a page text content failed to read successfully
+   */
+  const onLoadError = useCallback(
+    (error) => {
+      setTextContent(false);
 
-    if (prevProps.page && page !== prevProps.page) {
-      this.loadTextContent();
-    }
-  }
+      warning(false, error);
 
-  componentWillUnmount() {
-    cancelRunningTask(this.runningTask);
-  }
-
-  loadTextContent = () => {
-    const { page } = this.props;
+      if (onGetTextError) {
+        onGetTextError(error);
+      }
+    },
+    [onGetTextError],
+  );
 
+  function loadTextContent() {
     const cancellable = makeCancellable(page.getTextContent());
-    this.runningTask = cancellable;
+    const runningTask = cancellable;
 
     cancellable.promise
-      .then((textContent) => {
-        this.setState({ textContent }, this.onLoadSuccess);
+      .then((nextTextContent) => {
+        setTextContent(nextTextContent);
+        onLoadSuccess(nextTextContent);
       })
       .catch((error) => {
-        this.onLoadError(error);
+        onLoadError(error);
       });
-  };
-
-  onLoadSuccess = () => {
-    const { onGetTextSuccess } = this.props;
-    const { textContent } = this.state;
-
-    if (onGetTextSuccess) onGetTextSuccess(textContent);
-  };
-
-  onLoadError = (error) => {
-    this.setState({ textItems: false });
-
-    warning(false, error);
-
-    const { onGetTextError } = this.props;
-
-    if (onGetTextError) onGetTextError(error);
-  };
 
-  onRenderSuccess = () => {
-    const { onRenderTextLayerSuccess } = this.props;
-
-    if (onRenderTextLayerSuccess) onRenderTextLayerSuccess();
-  };
-
-  onRenderError = (error) => {
-    warning(false, error);
+    return () => cancelRunningTask(runningTask);
+  }
 
-    const { onRenderTextLayerError } = this.props;
+  useEffect(loadTextContent, [onLoadError, onLoadSuccess, page]);
 
-    if (onRenderTextLayerError) onRenderTextLayerError(error);
-  };
+  /**
+   * Called when a text layer is rendered successfully
+   */
+  const onRenderSuccess = useCallback(() => {
+    if (onRenderTextLayerSuccess) {
+      onRenderTextLayerSuccess();
+    }
+  }, [onRenderTextLayerSuccess]);
+
+  /**
+   * Called when a text layer failed to render successfully
+   */
+  const onRenderError = useCallback(
+    (error) => {
+      warning(false, error);
+
+      if (onRenderTextLayerError) {
+        onRenderTextLayerError(error);
+      }
+    },
+    [onRenderTextLayerError],
+  );
 
-  onMouseDown = () => {
-    const end = this.endElement.current;
+  function onMouseDown() {
+    const end = endElement.current;
 
     if (!end) {
       return;
     }
 
     end.classList.add('active');
-  };
+  }
 
-  onMouseUp = () => {
-    const end = this.endElement.current;
+  function onMouseUp() {
+    const end = endElement.current;
 
     if (!end) {
       return;
     }
 
     end.classList.remove('active');
-  };
-
-  get viewport() {
-    const { page, rotate, scale } = this.props;
-
-    return page.getViewport({ scale, rotation: rotate });
   }
 
-  renderTextLayer() {
-    const { textContent } = this.state;
+  const viewport = useMemo(
+    () => page.getViewport({ scale, rotation: rotateProps }),
+    [page, rotateProps, scale],
+  );
 
+  function renderTextLayer() {
     if (!textContent) {
-      return null;
+      return;
     }
 
-    const container = this.layerElement.current;
-
-    const { viewport } = this;
-    const { customTextRenderer, pageIndex, pageNumber } = this.props;
-
-    // If another rendering is in progress, let's cancel it
-    cancelRunningTask(this.runningTask);
+    const container = layerElement.current;
 
     container.innerHTML = '';
 
@@ -144,19 +147,19 @@ export class TextLayerInternal extends PureComponent {
     };
 
     const cancellable = pdfjs.renderTextLayer(parameters);
-    this.runningTask = cancellable;
+    const runningTask = cancellable;
 
     cancellable.promise
       .then(() => {
         const end = document.createElement('div');
         end.className = 'endOfContent';
         container.append(end);
-        this.endElement.current = end;
+        endElement.current = end;
 
         if (customTextRenderer) {
           let index = 0;
           textContent.items.forEach((item, itemIndex) => {
-            const child = this.layerElement.current.children[index];
+            const child = layerElement.current.children[index];
 
             const content = customTextRenderer({
               pageIndex,
@@ -170,26 +173,32 @@ export class TextLayerInternal extends PureComponent {
           });
         }
 
-        this.onRenderSuccess();
+        onRenderSuccess();
       })
-      .catch((error) => {
-        this.onRenderError(error);
-      });
-  }
+      .catch(onRenderError);
 
-  render() {
-    return (
-      // eslint-disable-next-line jsx-a11y/no-static-element-interactions
-      <div
-        className="react-pdf__Page__textContent textLayer"
-        onMouseUp={this.onMouseUp}
-        onMouseDown={this.onMouseDown}
-        ref={this.layerElement}
-      >
-        {this.renderTextLayer()}
-      </div>
-    );
+    return () => cancelRunningTask(runningTask);
   }
+
+  useLayoutEffect(renderTextLayer, [
+    customTextRenderer,
+    onRenderError,
+    onRenderSuccess,
+    pageIndex,
+    pageNumber,
+    textContent,
+    viewport,
+  ]);
+
+  return (
+    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+    <div
+      className="react-pdf__Page__textContent textLayer"
+      onMouseUp={onMouseUp}
+      onMouseDown={onMouseDown}
+      ref={layerElement}
+    />
+  );
 }
 
 TextLayerInternal.propTypes = {