React/React Native Experience Point Counter?-CodePudding

I am trying to make an experience point counter for a project I am working on. I want it to increase by 15 each time the user reaches the "Quiz Completion" page that I have and display the number on the profile page. But I've only seen tutorials on how to make counters with a manual button to increment and decrement.

I'm a beginner with React so I was wondering if anyone can explain how to make one like I described? Examples would be great too!

CodePudding user response：

If you're using React Functional Components (RFC), you can use from useEffect hook that you should import from React and use from empty dependency to run your code once (when a user opens this screen). You can write your codes (to increase the score) in the callback of useEffect like this:

import { useEffect } from "react";
import "./styles.css";

export default function QuizCompletion() {

  useEffect(() => {
    // Your code for increase your score state here
  }, [])

  return (
    <div className="App">
      <h1>Hello</h1>
    </div>
  );
}

CodePudding user response：

IMO you should NOT use useEffect. Right before navigating to 'Quiz Completion' page you probably send some data to server. If the request is successful, you should add to experience point counter in its callback.