我如何才能渲染侧面，仅在单击时，而不是使用React Hook useState？

import React from 'react';

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      showSide: false
    };
  }

  handleClick = () => {
    this.setState({ showSide: !this.state.showSide });
  };

  render() {
    return (
      <div>
        <button onClick={this.handleClick}>Toggle Side</button>
        {this.state.showSide && <div>侧面内容</div>}
      </div>
    );
  }
}

export default App;

import React, { useRef } from 'react';

function App() {
  const showSideRef = useRef(false);

  const handleClick = () => {
    showSideRef.current = !showSideRef.current;
  };

  return (
    <div>
      <button onClick={handleClick}>Toggle Side</button>
      {showSideRef.current && <div>侧面内容</div>}
    </div>
  );
}

export default App;

import React, { useEffect, useState } from 'react';

function App() {
  const [showSide, setShowSide] = useState(false);

  useEffect(() => {
    // 这里可以添加一些副作用，比如数据获取等
  }, [showSide]);

  const handleClick = () => {
    setShowSide(!showSide);
  };

  return (
    <div>
      <button onClick={handleClick}>Toggle Side</button>
      {showSide && <div>侧面内容</div>}
    </div>
  );
}

export default App;