Learning Summary — from My First React Code Challenge
My first ever frontend code challenge using React is over! Were tears involved in the process? That only God knows. I encountered some unexpected issues but I did my best to resolve them and I am proud of myself for not giving up and completing the task.
Now, what’s done is done and I’d like to have some time to think about the issues I had and try to understand why they happened and what would be the best way to fix them.
💯 Areas for Improvement & Questions
1. Why did AJAX not work when the JSON file was in the src folder but did work in the public folder?
One of the general specifications of the challenge was to show profile data provided a JSON object, using the AJAX request. After making a React project using create-react-app, I created a profiles.json file in the src/assets folder and pasted the given JSON object and wrote an AJAX request with hooks.
⚠️ 🤯 Then I got an error message:
SyntaxError: Unexpected token < in JSON at position 0
To me, the code syntax of fetch() with React hooks itself looked perfectly fine. To figure out what went wrong, I logged profiles.json with text() and found out that the response body was my index.html file in the public folder, not my profiles.json file, which made the error message perfect sense since an HTML file always starts with <. It seemed like fetch() was wandering in the public folder, looking for profiles.json. So I moved my profiles.json file to the public folder and it resolved the issue.
Even though I somehow figured it out, I could not understand why it happened. There were some other people with the same issue, too. I googled with the following keywords: fetch API, CORS, web-server, AJAX, React development environment, create-react-app server, etc. When it comes down, the fundamental problem was that my server is not set up to return the local JSON file, therefore it returns index.html instead. Still, I could not pin-point what exactly caused the error. And I found this post and it says,
Your Fetch API calls made from a React component always looks for files or any other relevant assets inside this
publicdirectory. Create-React-App doesn't put your assets automatically inside this directory during compilation so you have to do this manually.
So far in my projects, (I think) I used AJAX call with external sources of JSON objects or local JSON objects by saving them as regular JavaScript files and exporting the entire object globally and that is why I have not had the issue 🧐.
2. What would be the better way of writing the handleClone function(in case you want to insert an element into a specific index of an array)?
- There is a list of cards and each card has a clone button. When the button is clicked, the card is duplicated.
Reading the instruction, I imagined either a new copy of a card is displayed right next to the original card because they are identical and showing the same data or the copy is put at the end of the list. In my code, I wrote two different logics for each case in ahandleClone function.
Case 1: A copied card is put right next to the original card.
In this case, a handleClonefunction should make an array, for example, like this: [a, b, c] -> [a, a, b, c] or [a, b, c] -> [a, b, b, c], which means a position of a copied data in the array matters. To assign a specific position in the array, I created a function named insert.
Case 2: A copied card is put at the end of the card list.
In this case, a handleClonefunction should make an array, for example, like this: [a, b, c] -> [a, b, c, a] or [a, b, c] -> [a, b, c, b], which means the copied data is put at the end of the array and one can simply use the spread operator.
What I was wondering is there any better/simpler way to get the job done in one function with both logics 🤔. Then I had the answer from the feedback I got on my code.
Ternary operator! Instead of repeating the same code, you can simply create a state, in this case,insertAfterand simply use it as a condition for the ternary operator.
3. What are the valuable tips and guidelines for data visualization?
While struggling with APIs of the donut chart, I thought this would be a good chance to learn some valuable tips for data visualization.
According to the classic four types of visual communication, the dataset I worked on is in the Everyday Dataviz quadrant. They are usually simple and the visualization should communicate a simple message, showing only a few variables. In this challenge, I was asked to make the donut chart which is a type of pie chart. Here are some dos and don’ts with pie charts.
🙆🏻♀️ Dos
- Use direct labeling wherever possible.
- Be very careful when you treat “unknown”. — should it be treated as another category or deleted?
- Use color categories that are relatively universal. — color hierarchy.
- Use the same color for the same measurement.
- Consider the audience with color deficiency.
🙅🏻♀️ Don’ts
- Don’t use 3D or blow apart effects — it makes visual distortion.
- Don’t use pie or donut charts when there are more than 3 categories. (Check some alternatives to pie charts)
- Don’t use more than about 6 colors.
📚 Sources
4 What is the best practice to create a dashed line in CSS?
One thing I noticed after the challenge is that CSS properties don’t support the customization of border-style. Therefore, many use a trick with an SVG image inside background-image property. With SVG, to change the distance between dashed lines, set a custom pattern, add dash offset, or change a line cap became possible. You can make customized SVG with a dash-line generator. When finishing customizing your dashed line, you can copy the URL of background-image from the generator.
5. How to update the state on prop changes?
During the challenge, there was an issue with the state update on prop change. I tried to create and use a new array state by mapping an array props and it didn’t work the way I expected. In the end, I solved the issue by moving the mapping operation to its parent component and pass the result as a props. Here I’d like to summarize other ways that I had found to solve the problem.
componentWillRecieveProps,getDerivedStateFromProps— UNSAFE to use & the old way.
Both componentWillRecievePropsand getDerivedStateFromProps are called whenever a parent component rerenders, regardless of whether the props are “different” from before(unconditional state override), which can cause state updates to be lost.
2. Fully Controlled Component(my solution)
A Controlled Component is one that takes its current value through props and notifies changes through callbacks like onChange. A parent component “controls” it by handling the callback and managing its own state and passing the new values as props to the controlled component. You could also call this a “dumb component”. I simply removed state from the component entirely so that I don’t have to worry about conflicts with state update.
3. Memoization
Memoization is a technique that ensures an expensive value used in render is recomputed only when the inputs change. In my case, memoization was not the best solution, however, it can be useful in a situation with a limited cache size in order to prevent memory leaks over time.
6. Time to learn Jest!
One of the things I added to my study list after the challenge is Jest. Jest is a JavaScript testing framework that can be used with TypeScript, React, Angular, and Vue. Testing can be and should be an important part of any major project I will work on. Even though I’ve felt a little bit afraid of diving into testing, I’d like to start learning about what testing really means, why it is crucial, and how to test my code through unit testing.
