React classic interview questions – Countdown component

Time:2022-5-11

React classic interview questions – Countdown component

Gossip

About the interview, people often roast: “the interview makes a rocket, and the work screws up.”, Thus, it expresses the current situation of different matching between work content and talent request.

Some companies want to explore the technical ceiling or comprehensive technical talents of candidates, hoping to get a talent with higher expansibility. Some companies don’t know how to select candidates, so they randomly find some online interview questions, various principles and details. It’s not that these things are bad, but I think the primary investigation is whether the candidate can be competent for the post. At the same time, if he can understand the principles and details, it will naturally be even more powerful.

After chatting, I think we can investigate and practice a question about react: how to complete a countdown component.

Countdown component – Requirement Description:

Write a functional component countdown, set a property that passes in the maximum value, and subtract one every second until it is 0.

**Question
How to design**

import { useState } from "react"
function CountDown({max = 10}){
  const [count,setCount] = useState(max)
    
  useEffect(()=>{
    if(count>0){
      setTimeout(()=>{
        setCount(count-1)
      },1000)
    }
  })
    
  return <h1>{count}</h1>
}
export default CountDown

Copy code
**What if I want to reset the count after the parent changes prop?
We use another useeffect to stop disposal:**

import { useState } from "react"
function CountDown({max = 10}){
  const [count,setCount] = useState(max)
  
  //Countdown logic
  useEffect(()=>{
    if(count>0){
      setTimeout(()=>{
        setCount(count-1)
      },1000)
    }
  })
  
  //Reset count
  useEffect(()=>{
    setCount(max)
  },[max])
  
  return <h1>{count}</h1>
}
export default CountDown

Copy code
**SetTimeout may cause memory leakage. What should we do?
Processed by the return function of useeffect**

import { useState } from "react"
function CountDown({max = 10}){
  const [count,setCount] = useState(max)
  
  //Countdown logic
  useEffect(()=>{
    let timer = null;
    if(count>0){
      timer = setTimeout(()=>{
        setCount(count-1)
      },1000)
    }
    return ()=>{
      clearTimeout(timer)
    }
  })
  
  //Reset count
  useEffect(()=>{
    setCount(max)
  },[max])
  
  return <h1>{count}</h1>
}
export default CountDown

Copy code

last

A simple component still contains many knowledge points. It can not only investigate the candidate’s basic technical ability, but also his logical thinking ability.

Recommended Today

Write loader and plugin

Original address Write loaders and plugins github 1、 Loader 1. Introduction to loader What is loader Loader is actually a function that converts the matched content and returns the converted result. Loader function staywebpackinloaderLike a translator.webpackOnly knowJavaScriptThis language is used for other resourcesloaderIt can be transformed for pretreatment The loader is executed in order,Support chained […]