Questions

Answer the following questions to check what you have learned about React Hooks:

1. The following component renders some text for 5 seconds. This is problematic though – what is the problem?

   export function TextVanish({ text }: Props) {

     if (!text) {

       return null;

     }

     const [textToRender, setTextToRender] = useState(text);

     useEffect(() => {

       setTimeout(() => setTextToRender(""), 5000);

     }, []);

     return <span>{textToRender}</span>;

   }

2. The following code is a snippet from a React component that fetches some data and stores it in state. There are several problems with this code though – can you spot any of the problems?

   const [data, setData] = useState([]);

   useEffect(async () => {

     const data = await getData();

     setData(data);

   });

3. How many times will the following component re-render in production mode...