Show Menu
Cheatography

FE Interview Cheat Sheet by

Frontend interview quick reference lookup

React Setup

Add Script
<script src="fo­o.c­om/­rea­ct.j­s" crosso­rigin />
Add targeting div
<div id="­rea­ct" />
Get root Dom
root = docume­nt.g­et­Ele­men­tBy­Id(­"­roo­t");
Bootstrap React
ReactD­OM.r­en­der­(<App />, rootEl­ement);

React Hooks

const [state, setState] = useSta­te(­ini­tia­lSt­ate);
useEff­ect(() => { ...logic, return cleanup}, [deps]);
useMemo(() => comput­eEx­pen­siv­eVa­lue(a, b), [a, b]);
Context
   ThemeC­ontext = React.c­re­ate­Con­tex­t(t­hem­es.l­ight);
   <Th­eme­Con­tex­t.P­rovider value=­{th­eme­s.d­ark­}>

   theme = useCon­tex­t(T­hem­eCo­ntext);
   backgr­ound: theme.b­ac­kground
useRef
   const inputEl = useRef­(null);
   <input ref={i­nputEl} />
   inputE­l.c­urr­ent.fo­cus();

async useEffect

useFetch = (param) => {
  const [state, setState] = useState([]);  

  useEffect(() => {
    async function fetchData() {      
      const response = await fetch('url');      
      const data = await response.json();

      setState((prev) => prev.concat(data.results));      
    }
    fetchData();
  }, [param]);

  return { state };
};
 

JS Arrays

Insert at Start
unshift()
Insert at End
push()
Insert at Location
splice­(start, 0, item2, itemN)
Remove First
shift()
Remove Last
pop()
Remove at Location
splice­(start, delete­Count)
Get parts
slice(­start, end)

Algos

DFS
getNod­es(­root)
   [...ge­tNo­des­(ro­ot.l­eft), getNod­es(­roo­t.r­ight)]
BFS
while(queue.length)
  for(queue.length)
     node = queue.s­hift()
     queue.p­us­h(n­ode.le­ft/­right)

Big-O

 

Comments

No comments yet. Add yours below!

Add a Comment

Your Comment

Please enter your name.

    Please enter your email address

      Please enter your Comment.

          Related Cheat Sheets

          Selenium WebDriver Cheat Sheet Cheat Sheet
          ISTQB Test Automation Engineering Cheat Sheet