More Coding Challenge Mistakes

The most frustrating thing for me in an interview is seeing approaches to code I've never done. Should I have probably learned them in my own time?

Probably...

It's still a frustrating and defeating experience, and it set me back immensely in my final round interview.

Messing up with common state management tools in React and claiming to be some kind of React "expert" was embarrassing to say the least.

I didn't know there was going to be another code challenge since I had already had one during my second round. Also, I didn't take my beta blockers, so my mind kicked into fight or flight mode, having to calm myself down and take it step by step.

Of course, I see a problem I know I could solve, but since I was so frantic and thrown off guard by the fact that I even had a code challenge and with state management tools I rarely use, I couldn't think straight.

Here are the problems I ran into. Stuff I really should have known right away.

---

Context of problem

We have pre-written code that is supposed to allow users to add a 'to-do' item, delete, and edit. My task was to find the bugs and fix them.

---

Mistake #1: Identical IDs across state

This was crucial to get this right at the first go. Each time we add an item and either edit or select delete, if there are other items, they'll all commit to the action together.

Yet, I still needed a small hint that helped me figure out that the generated 'id' was shared across all the items. I spent a good amount of time trying to figure out the issue until he said, "You mentioned something about the ID earlier, what was that about?" Something along those lines.

const now = Date.now();
...
case "add": {
 return [
     ...state,
     {
     id: now
     ...
   },
 ];
}

As you can see from the code, the id is set with Date.nonw() which basically generates the same id across the items.

Duh...

Mistake #2: Filtering and returning state

I thought I had pretty gotten good at the filter method.

Keyword: THOUGHT

I was so focused on quadruple-checking my filter logic, I didn't return the state properly. When things weren't going my way, I thought right then and there that I was screwed. I spent a good 15 minutes on this.

Wasted...

BEFORE

 case "delete": {
      return state.filter((item) => {
        if (item.id !== action.payload) {
          return item;
        }
      });
    }

AFTER

 case "delete": {
      const newState = state.filter((item) => {
        if (item.id !== action.payload) {
          return item;
        }
      });
      return [...newState];
    }

This is redundant to do. "Filter" already gives us a new array that meets the requirements.

WHAT I SHOULD HAVE DONE...

case "delete": {
  return state.filter(item => item.id !== action.payload);
}

*sigh...

Mistake #3: Adding keys to lists

  <div
      key={id}

Basic React. Any list items should use a unique key for rendering purposes.

*sigh, again.

Mistake #4: Unfamiliar with setState in useReducer

My last implementation item was to ensure that the items persisted after refreshing the page. So, of course, we should use localstorage caching.

Most of the code was actually already written. My main problem was that state wasn't being set in the reducer.

  useEffect(() => {
    const raw = localStorage.getItem("data");
    dispatch({ type: "setState", payload: raw ? JSON.parse(raw) : [] }); // this wasn't running
  }, []);

Easy fix...

    case "setState":
      return action.payload;

---

Conclusion

I went over the code soon after I was done with the interview. I knew what, where, how, and why I went wrong. I think what enrages me is that these mistakes weren't things that I felt defined me as an engineer.

Even though I didn't write my code correctly, all at once, on the spot, it doesn't take away from the fact that I knew the whys behind the code and how to correct it. When there was an issue, I knew where and how to look.

I wish interviewers would just talk to my references, get to know my work ethic, see my passion and love for problem-solving, and how much I love doing it alongside others.

I'm tired of sweaty palms, cracking voices, and mini panic attacks during interviews. I'm tired of every interview needing to be my saving grace, since the longer I go without work, the hard it is to take care of me and my family.

I'm tired.