Below are 20 questions that I have encountered during my job hunt. The idea is to answer these questions confidently. Maybe dive a little deeper in case you are asked for your reasoning. Good luck with your interviews!

1. How is HTML rendered?

   At the time I had no idea what this question meant. You see I have never been interested in this much detail. But I forever know where to find a good answer. Read this article

2. What is hoisting?

   Hoisting is the ability to use a variable before it is declared. Javascript lifts declaration to the top of the scope.

    x = 5
    let x;
   

   The online consensus is that this is extremely useful to keep business logic functions at the top and helper functions at the bottom. However, this practice will vary depending on company practice.

3. What is a closure?

   • My definition: function A has a Function B declared inside of it. function B uses params or variables declared in function A. Commonly used for currying.

   • MDN formal definition: A closure is the combination of a function bundled together (enclosed) with references to its surrounding state (the lexical environment). In other words, a closure gives you access to an outer function's scope from an inner function

   • An Example

   •           const a = (x) => {
                 const b = () => {
                   console.log('this is b: ', x)
                 }
                 return b
               }
               const foo = a(2)
               foo() // this is b: 2
     

     When I mentioned the use of closures for currying, it seemed that currying was not a popular topic. So for those wondering what currying is here is an article to learn more. And here is a StackOverflow explaining how closures and currying are related.

4. What is an Immediately Invoked Function Expression?

   A function that is called right after its declaration. In my working career, I haven't seen these used. So for me, this is usually just a vocabulary question to ask. Although MDN lists a few use cases for them.

5. What is the difference between a cookie and a session?

   I was asked this question twice. I knew that cookies and sessions both store user data but that was all I knew. I haven't needed to know anything outside of that.

   After the first time, I learned the major difference was one was client side and the other server side. But after the second time being asked I found some more differences.

   • Cookies:

     • client-side

     • 4kb is the max capacity

     • use a text file

   • Sessions

     • server-side

     • unlimited capacity, though there is a 128MB memory restriction at once

6. Following my answer that one is server, and the other is client, I was asked "What do you mean by client and server?"

   Another vocabulary question. But I knew the answer to this, or at least I painted the picture. A client is what the user interacts with, the webpage or application. The server is what the client interacts with, the API.

7. What types of storage are there on a browser?

   localStorage and sessionStorage.

8. When to use useCallback?

   We use it when we want to enhance performance. Here are a few resources to learn more:

   • An article that will explain some of the nuances

   • A video with an example of when to use useCallback

9. when to use useMemo?

   The answer to this question is similar to the useCallback one. Here is a video explaining the useMemo hook

10. What is cache?

    Cache is like that part of your brain that remembers stuff. Formal definition from tech target: hardware or software that is used to store something, usually data, temporarily in a computing environment.

11. What is the difference between Display: 'flex', Display: 'none', and visibility: 'hidden'?

    I would probably assess the use of conditionally rendering a component before using CSS to do so.

    • display is used for determining the layout; block or inline.

      • display: none turns off the display, so you don't see it on the DOM

      • display: flex behaves like a block, and the contents use the flexbox model

      • visibility: hidden hides the element without changing the DOM

12. Write a function that returns true if the parentheses expression is correct.

    We all know that whiteboarding is still an awful standard and I admittedly still got stuck in my thinking process even though the below was written in about a minute without looking up the answer.

    const validParen = (str) => { 
      if (str.length === 1){
        return false
      }
      let openParen = []
      for(let i = 0; i < str.length; i++){
        if (str[i] === '(' || str[i] === '{' || str[i] === '['){
          openParen.push(str[i])
        }
        else if (str[i] === ')' && openParen.pop() !== '('){
          return false
        }
        else if (str[i] === '}' && openParen.pop() !== '{'){
          return false
        }
        else if (str[i] === ']' && openParen.pop() !== ']'){
          return false
        }
      }
      return openParen.length === 0
    }
    

13. Do you know typescript?

    If you have read the docs and have used typescript, you should probably answer yes to this question. The only difference between typescript and javascript is.... the use of types.

14. Do you know angular?

    Not a great question for a react role, but answer honestly.

15. How to use inheritance?

    For this question, it is important to know the difference between extend and implement. Learn more here

    extend: class is a child.

    implement: class is the same shape but not a child.

16. When to use useContext vs Redux?

    useContext is a hook while Redux is a library that uses pure functions to change state. But I will never know if my answer was correct.

17. Difference between public and private variables?

    While JavaScript does have scope, it doesn't have the concept of public or private variables. I guess you could use closures to simulate private variables, but that gets messy.

    The answer here is: A public variable is accessible from other classes and private variables are variables that are only accessible to the class they belong to. Usually, public methods exist that can change or get the value of the private variable

18. Difference between null, undefined, and undeclared variables?

    // null: usually used as an intentional value.
    const foo = null
    //undefined: a variable that has not been assigned a value
    let bar;
    // undeclared variable: a variable that does not exist
    console.log(bazz)
    

19. How do you handle security concerns in React applications?

    I was thrown off by the "in react applications" part. This is where confidence comes in. The way to do this is like any other javascript or web application you want to prevent XSS scripting attacks. So sanitize user input, make sure you use https for secure data transmission, and make sure you set up proper authentication.

20. How to center a div within a div?

    <!DOCTYPE html>
    <html>
      <head>
        <style>
          .myDiv {
            border: 1px outset red;
            display: flex;
            height: 500px;
            width: 500px;
            justify-content: center;
            align-items: center;
          }
        </style>
      </head>
      <body>
        <h1>The div element</h1>
        <div class="myDiv">
          <div class="innerDiv">This is a heading in a div element</h2>
        </div>
      </body>
    </html>
    

I may not agree with all the above questions being a decider if someone is senior or not. In terms of a React web developer, there are tons of questions you can ask hooks, CSS, HTML, any topic in the Javascript Definitive Guide, any thing on the React doc, any of the CSS properties that exist. The combination of questions is quite large, and for a single person to try and learn every possible question so they can pass an interview is a tall order. So here I am documenting the questions I get, hoping that the questions I have listed help you study for your next interview and that they have found a permanent home in our memory for the next time these questions get asked. Until next time!