Unnoticed stuff of the Ubiquitous React
A technology that has been as famous as its parent company (for right reasons in this case😅), in the world of developers, which has revolutionized the very idea of building websites or web apps, something more than just using HTML, CSS, and JavaScript: Undoubtedly REACT! A JavaScript Library (remember not framework), it is used in web development to build interactive elements on websites.
Searching a tutorial series?
So I won’t go in that direction. So what on Earth would I be doing? Simple, just bring to notice some points which I found, go unnoticed at times, and make an attempt to explain them over here. So the relay begins!
- A function that returns a function: While working in React, we might be required to use functions that return a function. Below is an example of it.
Any difference? In the first case, the function hello is called out in the returned JSX, while in the second case, the function handleClick is referenced.
Here, onClick is the event handler, which must be a function. So in the first case, the function ‘hello’ is called because it returns the function ‘handler’, which is directly assigned to the onClick event handler, whereas in the second case, the function ‘handleClick’ is referenced since it does not return anything, but defines the action to be done on the event change.
2. Defining Component within another component: One must keep in mind, NOT to define a component within another. While implementing, it may appear to work, but is definitely not advisable. React treats a component defined inside of another component as a new component, in every render. This makes it impossible for React to optimize the component.
3. Array indices being used as a key for the key-value pair: Let us have a look at the 2 cases shown here.
Given a choice, option B may seem to be a bit preferable, given a developer’s familiarity with arrays, but tada! It is option A.
One must be aware that it is the ‘key’ that React makes use of, to identify DOM elements. Consider a case when an item is pushed to or removed from the list, resulting in an index ‘i’ to represent some other element at a given instance. In these cases, it is pretty evident that the use of index as a key is not a good option, given the requirement of it as a permanent identity to an element and realizing how ‘id’ remains the same (as we choose) for an instance and so, is preferred.
4. Dealing with Event Handlers: Event Handlers, as talked about earlier, are the functions defining the actions to be undertaken once the defined event happens. Given is a code snippet from the App.js file for a note-taking application.
The preventDefault method to an event, a very useful one indeed, is used to prevent, in this case, the auto submission of form and page reload, i.e. the actions associated with an event, by default.
While using event handlers in React, we tend to come across ‘event.target.value’, where we often miss the ‘target’ part of it. The word ‘target’ is used to identify the part of DOM to be affected or which witnesses the change. This will be clearly evident from the example we see.
For addNote event handler in (ii), the ‘target’ is pointing out to the whole form component, which includes the input tag and the button.
For handleNoteChange event handler in (iii), the ‘target’ is pointing only to the input tag, being referenced here, and ‘value’ is referred to the content entered in the input box.
Some of the above instances of React may seem to be very known, but while writing programs, we tend to forget them, or not understand these concepts completely and then
Did you find this blog useful? Then please do like and share it with your fellow dev mates. Found some constructive? Open to them anytime! Comment down below or mail it at maniruddh6@gmail.com.
Till then, Cheers to learning!😄
