Mitanshu Patel

So I have more than three years of experience in developing web and mobile applications using React Native, Node.js, as well as Next.js, particularly in programming languages. I have proficiency in JavaScript, TypeScript, HTML, and CSS. I have also worked with other frameworks, including Redux, custom hooks, Material UI, Tailwind CSS, SaaS, and Chakra UI. In databases, I have experience working with MySQL as well as MongoDB. And in cloud services, I have used AWS, Heroku, as well as Vercel. So, yeah, this is a bit of an introduction about me.

I would implement a feature flag in Redux application. Firstly, I can create a store using the Redux store available. And then if I have a requirement of using a synchronous operation, then I would also add a middleware like Thunk in my Redux store while configuring the store. Then after the store has been created, I will first add one action as well as the reducer. And I will also define types so that my reducer can be uniquely identified by these other types. And then whenever I need to use that particular feature flag, I will use the useSelector. And inside, I will get the state and whatever I had to find inside this particular folder so I can import it. And if I want to edit or update the flag, then I can use the dispatch by importing the useDispatch hook given from Redux. And then after using the dispatch feature dispatch function, I will pass the action of updating that feature flag in the callback. So, that's how I would manage feature flags in a React Redux application.

I will firstly integrate a third-party JavaScript library, which is not compatible with any late lifecycle matter. Then, I will first go through the documentation to understand how it would work in my core HTML and just the part. And here, I will check whether it supports any script loading or any function loading inside my HTML page. So, I will import any script loading if it's there, then I will add it to my index.html file, which would be given inside my React application. And after the script has been loaded, I will add my useEffect. Whenever using the new keyword or Pen constructor, if I need to input that, then I can use it. Otherwise, we have different functions given according to the requirement of the particular library. So, I will add or call that function inside my useEffect. And it depends on where it would be placed. Firstly, it was to be placed throughout the application, then I will add it to my App.js or Layout.js file so that it would be available throughout the application. Or else, if I want to integrate it with a particular module, then I can import it or call that function in the useEffect of that particular component only.

Conditionally applying CSS styles to a React component in response to user interaction. Firstly, I will add a user ref. I will import the user of hook coming from Viet, and then I will add it for that ref to a particular target, like a div, p tag or a button wherever we have a requirement. And then on the basis of that, in an on click method or any other event, I will add inside my useEffect. And here, I will add let's say I have given the name as divRef or containerRef. So I will add that containerRef.current.style = { backgroundColor: 'red' }; for example, I want to change the background color. And then afterwards, the most important part is that inside the return statement of useEffect, I will also unmount that particular event listener so that it could improve the performance of any web application. Or else it would continuously listen to the events whenever this button is on click or this event has been triggered. It will help to trigger automatically again and again. So to avoid such scenarios, I will unmount that event listener inside my useEffect return statement.

The first setup and management of routing will require a dynamic payloading. Firstly, I will import the library via React Router DOM and inside which it has a browser router. The browser router is another thing, which could be memory router, hash routers. According to the requirement, I will add a browser router. And inside it, I will define the routes, which first parameter will take the path, for example, dashboard. And then in the second parameter, I will add the component. And inside my component, I can wrap my component with lazy loading. While defining the routes, I can also create a suspense so that if my component fails to load, I can add a fallback. For example, an error page or any other loading page if I want to display. So that whenever lazy loading happens, for example, let's say the user scrolls on that particular viewport, then only that particular component is being loaded instead of calling that component unnecessarily from the dashboard page or from the top page only. So, that's my approach for using routing inside my React application.

In my middleware to implement logging on every action changes. So first, during the implementation of the create store method, I can only add one middleware. For example, on every reducer, I have I will defend reducer for each and every action or any update method to be called. So there, I would add a log, for example, this type of action has been called and this is the new data coming from this particular action. And inside my reducer, I will add logging statements. And for example, if anything goes wrong, then here we can make a default that this particular log has been created because this type of action has been called and this particular action has returned this data. So here, we can add logging statements. And another thing could be, we can also add the React Redux developer tools extension so that it would be easier for me to log or even make debug statements that show which particular type has been called, which data was changed, or which was the data before this particular reducer was called. So we can also use Redux developer tools for that scenario.

Consider the statement when you are doing that there is a bug which could cause it not to work and read it for. Okay? Assign function. Password data. Insert this one. Okay, so here, if I'm using a fetch statement, then we need to convert it into JSON. So first, we need to add the await keyword to the response to convert it to JSON. Another thing could be that even if the URL is not given as a string. For example, I fetch, and after that, we use a backslash. So it will take the URL as a reject expression. So this is one more non-working scenario. This could be a bug.

We're defining the return type of the increment function and the increment creator function. Like, we haven't passed the data and action payload coming from the licensing encounter as a parameter. We're returning just the type, but we're not returning the payload and action. Also, the type is expecting a string, but we've passed something else over here. This could be an issue, especially in a project.

I think with multiple feature domains, we can, in our current Fintech product, also, we have added a monolithic React application architecture where, let's say, from one GitHub repository, six or seven applications are being hosted from one GitHub repository due to the monolithic architecture. And so here also, we have added different stores being created for different applications. So it would not, like, tend to or come from like, it would not become a conflict according to different stores or different applications, their own unique stores so that data won't be manipulated from one store to another. So here, we would design multiple stores so that every application provider has their own store. And they have their own reducer as well as their own actions. And another key feature we could use over here is that if I am integrating different domains so that I can also have multiple local storage as well as session storage access. So I can also use different local storage as well as different session storage coming from that particular application.

Unit test cases for reducer could be where we are passing payload data coming from the reducer. And if the payload data is coming from a number, then our calculation or if any middleware is being created, which could convert it from one particular type to another, or conversion from 1 Bitcoin to US dollar. So here, if we are passing a string, then definitely it would throw an error or the user can experience any type error while updating the data. So here, we would make that particular test case for type cases. Then another thing could be passing 0 or a negative integer as reducer data, or else any new date is being called, then which particular time stamp to be called. For example, if the user has a pop time stamp and we are passing a new date object, so there also the user can get a bad experience due to type error coming over. So we can handle such test cases. You can also handle so and write such test cases using Jest.

The Webpack for better bundling and efficient load times could be, firstly, I would integrate the latest libraries as well as the latest codes available in the NPM. Then another thing could be, live images could be called parallelly instead of putting them in our static asset file. And even we can add bundling of those particular images so that compression occurs over a period of time. So that image won't take a long time to load. Then another thing could be, we can add JS bundlers so that our JavaScript files could be minified. Uglification can also help to increase the performance. So that minification, for example, all files are to be bundled into one. So that it will help to increase our bundle size overall. Then uglification could be, for example, if I have one variable defined, constant name is equal to metan show. Then over here, if I'm using nullification, then what it will do is that it will change my constant into a variable name that could be changed to a random constant, like, Mitancho, so that this variable name wouldn't be long or big so that less amount of memory would be allocated. And it will help to increase our load times as well as the performance of any web application. Then another key feature is to integrate Babel so that, for example, if any old browser which doesn't have compatibility with ES 6 error functions, they will automatically convert it to ES 5 regular functions statements over there. So these things could be taken care of if I'm opting to customize Webpack inside my React application.