将基于 Class 的组件转换为基于功能的组件

Question

guys i wanna convert this code:

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = { isLoading: true };
  }

  performTimeConsumingTask = async () => {
    return new Promise((resolve) =>
      setTimeout(() => {
        resolve('result');
      }, 2000)
    );
  };

  async componentDidMount() {
    const data = await this.performTimeConsumingTask();
    if (data !== null) this.setState({ isLoading: false });
  }

  render() {

    if (this.state.isLoading) return <SplashScreen />;

    const { state, navigate } = this.props.navigation;

    return (something)

i wrote this code but it doesn`t work:

const App = () => {
  const [fontLoaded, setFontLoaded] = useState(false);
  const [isTimerOn, setIsTimerOn] = useState(true);

  if (!fontLoaded) {
    return (
      <AppLoading
        startAsync={fetchFonts}
        onFinish={() => setFontLoaded(true)}
      />
    );
  }
  useEffect(async () => {
    const data = await performTimeConsumingTask();
    if (data !== null) setIsTimerOn(false);
  });
  if (isTimerOn) return <SplashScreen />;
  else {
    return (something)

This will show an error: Invariant Violation: Rendered More Hooks than during the previous render.

If I comment the useEffect hook it will run the splashScreen . Can any one help me in converting it?

Answer 1

There must be no conditional return before using all the hooks, in your case you return before using useEffect .

Also useEffect must not run on every render since it sets state in your case. Since you only want it to run on initial render pass an empty array as the second argument.

Also useEffect callback function cannot be async.

Read more about useEffect hook in the documentation.

Check updated code below

const App = () => {
  const [fontLoaded, setFontLoaded] = useState(false);
  const [isTimerOn, setIsTimerOn] = useState(true);

  const performTimeConsumingTask = async () => {
      return new Promise((resolve) =>
         setTimeout(() => {
           resolve('result');
        }, 2000)
   );
  };
  useEffect(() => {
    async function myFunction() {
       const data = await performTimeConsumingTask();
       if (data !== null) setIsTimerOn(false);
    }
    myFunction();
  }, []); // With empty dependency it runs on initial render only like componentDidMount

  if (!fontLoaded) {
    return (
      <AppLoading
        startAsync={fetchFonts}
        onFinish={() => setFontLoaded(true)}
      />
    );
  }
  if (isTimerOn) return <SplashScreen />;
  else {
    return (something)

Answer 2

Pass [] as an argument if you wanted to use this hook as componentDidMount

useEffect(async () => {
const data = await performTimeConsumingTask();
if (data !== null) setIsTimerOn(false);
}, []); 

Here is a list of hooks how you can use hooks to replace lifecycle methods

https://medium.com/javascript-in-plain-english/lifecycle-methods-substitute-with-react-hooks-b173073052a

The Reason for getting an error is your component is rendering too many times and useEffect is also running on each render by passing [] will run the useEffect on first render as it will behave like componentDidMount.

Also follow this to make network calls inside useEffect

https://medium.com/javascript-in-plain-english/handling-api-calls-using-async-await-in-useeffect-hook-990fb4ae423