When working with JavaScript, we deal a lot with conditionals, here is a quick and easy way to write better / cleaner multiple or conditionals. Let’s take a look at the example below: // condition function test(fruit) { if (fruit == 'apple' || fruit == 'strawberry') { console.log('red'); } } Initially, the example above appears to be a good one. However, what if we received more red fruits, such as cherries and cranberries?...
Formik is a form management library that provides components and hooks to ease the process of creating React forms. Formik takes care of form states, validation, and error handlers for you which makes it easy to collect and store user data. Following are the 2 of the best resources I have found online to learn formik.js: How to Use Formik to Create Forms in React Formik JS playlist by CodeEvolution
In addition to the useState Hook, there is the useReducer Hook in React. It allows for the creation of custom state logic. useReducer may be useful if you have to track multiple pieces of state involving complex logic. The useReducer Hook accepts two arguments. Syntax: useReducer(<reducer>, <initialState>) The reducer function contains your custom state logic and the initialState can be a simple value but generally will contain an object. The useReducer Hook returns the current state and a dispatch method....
The React useCallback Hook returns a memoized callback function. Think of memoization as caching a value so that it does not need to be recalculated. This allows us to isolate resource intensive functions so that they will not automatically run on every render. The useCallback Hook only runs when one of its dependencies update. This can improve performance. Why does this matter? In JavaScript, functions display referential equality. This means they are only considered equal if they point to the same object....
A higher-order function takes a function as an argument and returns a function. HOC is not a feature in React or any other programming language. It is a pattern that emerged from the components nature of React. Examples of the higher-order functions are the; .map, .filter, etc. In react, a higher-order component (HOC) is deemed an advanced technique for reusing component logic. They are not part of the React API, but they are the model that begins from React’s compositional nature....