Subhankar Show

Sure. So hi. This is Shubhankar Shaw. Uh, I completed my BTech in 2018, and then I started my career initially with jQuery and WordPress as a seamless platform. And then I completely switched to React Chase. So overall, as an UI developer or front end developer, I have 4 1 4.4 years of experience. With, uh, React Chase specifically, I have 3.7 years of experience. And, uh, if I talk about my, uh, background and projects that I've worked on, like, big projects that I've worked on, uh, I will start with a company, like, a educational website. Uh, I will call it LPU, Lovely Propulsion University. So for that particular thing, I have built 120 y pages using Figma and this, uh, jQuery also React JS also was, uh, there. Uh, so it was, like, grand shares, basically, in in the first place. It was based up, and then completely switched to react of the whole application. Uh, so, yeah, that was the first project. And then, uh, I worked for a bank, ANZ Bank Australia. Uh, for that, there's some, like, existing project, and they wanted to introduce a new report data table into it. And the report data table will consist of, like, uh, all kind of functionalities, uh, of multiple training, global, and column level searching, pagination for better UX, uh, and better loading. And there, they had, uh, this sub numbers to trigger from one report place to another report place. There was mainly 3 report pages. So for that thing, I've used React 18 library called n design library to get all the data table from a large set of API datas. And, um, and over there, uh, also handled all Jira cards, business communication as a menu developer, uh, and laid a team also of 2 members. And then the last current project was for a US insurance company called Grange Insurance. And for that thing, I've handled the Redux store management, uh, because they're like it was, like, kind of a PC guide to our, uh, system that was based on, and I was a total developer with which is based on and TypeScript. And, uh, for that thing, I have just, like, figured out all the UI field based on the store management and dispatching method, uh, to the, uh, exact payload, uh, of the method call. And, yeah, that's how the pretty much of my experience, uh, states. Yeah. Thank you.

Yeah. So global styles, uh, like, basically, it will be like if you you can, uh, break it into component wise. Okay? Uh, you you have a, like, a your global CSS, uh, and then you have a, like, component based your CSS files, uh, or you can just normally use your, um, like, style component, uh, inside your, like, structure like, breaking point of components, uh, so that your global style is basically why you use that kind of a variable kind of thing to use, uh, multiple places or you wanna don't wanna mess up with your, uh, original or default, um, some CSS classes. So for that thing, uh, like, uh, a CSS file that that globally define, and then, like, uh, component wise, you are defining it. And if you have, like, a requirement to override some property CSS property, then you can go for that inline CSS or or you can go for the important thing um, that that's his property provides you. So, yeah, that's how the component breaking, and then you can just have it in a separate copy style. Thank you.

Okay. So, basically, for side effects, there's multiple thing that there's middleware as well. But if you, like, talk about the hooks, then the useEffect comes into the picture where you using the useEffect, you can manage the side effects. Like, for example, if you are fetching a data, like, uh, API data and going to the try catch block over there, and then if you wanna, like, restrict that rendering of that, uh, API calls to a specific thing or specific values, uh, of props values, then you can just have it a use effect hook over there. You can just call, uh, that function if they call page function inside it. And in the in the, like, uh, array, they're gonna add a, like, as a second parameter, second argument in that user function, user bit, uh, hook. You can just mention your, uh, dependency values into the service. Yeah. That's how you, like, uh, handle the side effects. There's multiple ways, but this is the one of the example. Thank you.

Okay. So, yeah, there is, uh, so many ways of doing that. You can just go for this, uh, like, higher order component of connecting, uh, or you can just state, like, state can be only state values can be changed inside a single component only. That you cannot, uh, change without using a store management tool. So, like, if you have to change any values on something, you can just, uh, go for the props stealing or the props, uh, transfers from 1 component to another component, or you can just normally, uh, for the, like, in a single component, you can just, uh, change the state in using the use state method on, like, set state. It will be a set state of your state management. And, uh, like, um, if you are talking with hierarchy, then you can maybe that HOC, uh, like, connect, and then you can access it. That's all. Thank you so much.

Okay. So, uh, basically, like, in React forms, uh, like, in the form, you have the third party live as well. But if you, like, go for the custom thing or all, so inside the inside the form, uh, like, you can pass a method, obviously, that takes takes that method and your post as well. So you can do that, uh, that post thing inside your, uh, form, uh, tag. And then inside it, you can just manipulate it with the function calls or the, um, change in states or the on click functions or the on submit function. And you can you can have, uh, your function call, whatever your function you are defining the, like, uh, upper section of your, uh, function, and you can just have it, uh, pass into your on function, whatever you need to change or one change, whatever you are dealing with, uh, that you can do, um, with it. You can use libraries as well. There is some, uh, React forms available in the library that you can use as well. Yeah. Thank you so much.

Okay. So, basically, um, like, if you're dealing with a, like, small kind of a state management, like, there's no big, uh, store to be introduced. Like, there is very small that you are dealing with. Then you just use a context API. Like, for example, I have, uh, used context API for on my on my project, last project. And over there, you will just have to like, this is a simple task. Like, you will have to just, uh, create your context and, uh, like, get your values in that, uh, context provider provider values, and then I can just have it in a used context and, uh, you you can just, uh, destructure of your all all values you are required. So that's how you can go for it or in, like, for Redux store. Like, it's like a bigger project that we're working on, a bigger store to manage, uh, then you go for this, uh, all your, like, actions or reduces to be created from your state actions. And, uh, your constant terms has to be in a different component of your constants, And then that's how you just, uh, grab all your action and state into a, you know, root reducer, combined reducer. And then you just, uh, then pass into your provider as a store, main store, and then you can access it. Yeah. Thank you so much.

How properly can we have? Yeah. Sure. Basically, prop dealing, I will not suggest to go go for the prop dealing because, like, in what happens in prop dealing is that if you go for prop billing, that, uh, unnecessary some, uh, companies we render, like, which are not required, like, which are not even, uh, getting that props values to be, uh, changed or something. So instead, like, it's kind of nested, uh, components to be passed from one component to another component, and that's why the comp prop ceiling comes into it. So so, yeah, word that thing, you can just normally go for the state management tools, uh, libraries. And over there, you can just have like, you have a state. And if you wanna get that state, you can just go for the use selector. Uh, you have a, uh, hook u selector. And using the using the u selector, you can just get that particular state, what your new need to be implementing that particular component. So, yeah, that's how, uh, one of the state management, uh, like, example that it can be observed, like, it can be grabbed. Thank you.

Okay. TypeScript is one of the main thing that we use for this, uh, better data type declaration and all this thing. But in JavaScript, uh, to have a better coding standard and all those thing, uh, so you can use use strict. Obviously, that is the thing. Uh, that all the style guide, uh, for standard, I guess, I will follow, uh, like, like, if for example, like, uh, if I have to go for an on click function, then I will not go the I will not write the one click function as an arrow function into a link in a single line. Rather, I will choose to declare a function or bind a function, uh, before, uh, calling it in the one click. So, uh, I will mention the function above that, uh, button on click function, uh, event. And then in the on click event, I will just I will just put that function. Whatever be my function, I I declare or the bind it, that I will just declare. That's how it it optimize also, and the it's a standard process. Um, also, yeah, like, uh, like, use of like, less use or, like, for for loop basis or for loop, you can like, if you have a, like, dealing with the normal arrays, so you can go for the 4 h or the map function or the filter function instead of the whole for loop thing. Um, that's the one way of optimize and then, like, all kind of, like, if it's blocks, like, instead of using a lot of if it's block, you can just go over the ternary operators, which will, uh, like, uh, list your, uh, coding style and, yeah, that how much and you have the optimization thing as well where you can, uh, like, use your use your like, if you could talk about the React thing, like, you can use your use memo for the handling and your the lazy loading, all kind of testing that can be optimized your code as well. Yeah. And use a fragment as well, yet fragment. So yeah. Thank you so much.

How you would use React's context to. Sure. So, uh, as I said earlier also that, uh, context API, basically, you just go for the create context. And in your store, you just, uh, if you provide a store, you just mention all the thing that you need or require to reuse, uh, in other components. So the thing is that, uh, if the other component do not require some values or thing, you will no. No. Don't have to destructure it in your use context, uh, method. So you will only get the values whichever is required for the particular component to use, um, that you can just have there so that it will, uh, decrease your dependencies, and it will not go for that, uh, props or state check, uh, in, like, in a DOM element. It will only check that particular, uh, props value or that set value that you were required, uh, in that particular component. So that's how it's will unnecessarily renders, uh, happens. Yeah. Thanks.

Let's check this to do imply to handle an image with. Okay. So memory leak, uh, that, like, I can have, like, authorization kind of a thing. So maybe that way, like, the cache handling, the system storage that's have, uh, like, has this, uh, like, local, like, of the handling of the like, you can use, uh, durability token in that site where you have this restriction to authorize this particular thing or the memory to be, uh, only authorized, uh, to the specific one. You can just, uh, just use memo hook. You may see basically to memorize all these, uh, your memory in your, like, UI field. So, yeah, that's how you can like, mainly, you have to restrict that authorization and authority, uh, like, authenticate authentic and authorization that both thing that you have to, uh, go for it and have to maintain it, uh, to the any token session or any, like, uh, normal session that you can go for. Yeah. Thank you so much.

Okay. So, uh, seasonal modules, basically, we use in the Next. Js mainly, basically, in the most of the time, uh, for, like, the server side rendering or and has this ability, uh, to get a particular CSS link to that particular component. We were, like, defining it, uh, or, like, uh, as in, like, document wise, we're just, uh, defining each component and then how, like, interlinked into a module CSS. And that mean like, if I go for an example, like, kind of a thing, like, in a traditional CSS, for example, if I'm declaring any variable. So with with the dash dash thing. So the variable will be like after execution also. The variable will still behave like an variable. Uh, but in module CSS, if you, like, go for any variable in the execution of the CSS execution, it will work as in property on as in property, not an an that variable will not be, uh, present there. It will just work as in, like, a property. This is property that you were using. So, yeah, this is one of the example that difference in the model services and the CSS. Yeah. Thank you so much.