Hello, lets quickly take a review on React forwardRef, what it in actual,
In React, the forwardRef function is a utility that allows you to pass a ref through a component to one of its children. It’s commonly used when you need to access the underlying DOM node or React component instance of a child component from the parent component.
When you create a component using functional components in React, you can use the useRef hook to create a ref object. This ref object can then be passed as a prop to child components. However, when you pass the ref as a prop to a child component, React does not automatically pass it down to the underlying DOM element or custom component. This is where forwardRef comes into play.
By using forwardRef, you can create a component that accepts a ref and forwards it to one of its children. Here’s an example:
const ChildComp = React.forwardRef((props, ref) => {
// Use the ref object to access the underlying DOM node or component instance
return <input ref={ref} />;
});
const ParentComp = () => {
const inputRef = React.useRef(null);
const handleClick = () => {
// Access the input element using the ref
if (inputRef.current) {
inputRef.current.focus();
}
};
return (
<div>
<ChildComponent ref={inputRef} />
<button onClick={handleClick}>Focus Input</button>
</div>
);
};
In the example above, the ChildComponent uses forwardRef to forward the ref prop to the <input> element. In the ParentComponent, a ref is created using the useRef hook and passed to ChildComponent using the ref prop. This allows the ParentComponent to access the input element and call the focus method when the button is clicked.
By using forwardRef, helps to bridge the gap between functional components and the imperative DOM or component operations that sometimes require direct access to child component element.
Note here we are accessing child’s component dom node not child component here as ref object, i.e can be consider as subtle difference to understand for our mind.
Hope this helps to clear out the basic concept behind using forwardRef in React.
Lets quickly go through the 10 keys, for preparing for React Js Interview
React basics: Familiarize yourself with React concepts such as components, JSX, state, props, lifecycle methods, hooks, etc.
React-Redux: Understand how to use Redux with React for state management.
React Router: Learn how to handle routing in React applications.
React performance optimization: Know how to optimize the performance of React applications, including techniques like lazy loading, memoization, and using shouldComponentUpdate.
React hooks: Knowledge of React hooks and how they can be used in place of class components.
React testing: Understand how to test React components using tools like Jest and Enzyme.
Familiarity with CSS: Good understanding of CSS, including CSS-in-JS solutions like styled-components.
JavaScript concepts: Good understanding of JavaScript concepts like closure, asynchronous programming, and ES6 syntax.
Git: Knowledge of Git and how to use it for version control.
Problem solving skills: Be prepared to solve algorithmic problems and explain your thought process.
Here is the basic process to create a project with React Fiber:
Install Node.js and npm (Node Package Manager) if you don’t have them installed already.
Use npm to create a new React project by running the following command in your terminal or command prompt: npx create-react-app my-app
Navigate to the newly created project directory: cd my-app
Start the development server by running: npm start
The development server should now be running on http://localhost:3000 in your browser.
You can now start building your React Fiber application by modifying the files in the src directory.
When you’re ready to deploy your application, run the following command to create a production build: npm run build
This should give you a basic understanding of how to create a React Fiber project. If you’re new to React, it may be helpful to go through some introductory tutorials before diving into your project.
Filtering customers state array based on array of ids in javascscript/react.
const activeCustomerIdSet = [3,4,9];
//customers is array of customer data in my case its array value is bit different, just to note.
const filteredActiveCustomersIds = Array.from(activeCustomerIdSet) || [];
let nonActiveCustomers = [];
let filterCustomer = [...customers];
if (filteredActiveCustomersIds.length) {
for (let cid of filteredActiveCustomersIds) {
filterCustomer = filterCustomer?.filter(cust => {
if (+cust?.value?.id !== cid) {
return cust;
}
});
}
nonActiveCustomers = [...nonActiveCustomers,
filterCustomer];
}
console.log({ filteredActiveCustomersIds, customers, nonActiveCustomers });
Here I would like to share with you a very handy and new innovative approach using ES6 Tag Literals template to ease of creating the base URL’s for use a single source of truth defined as library constants or utility code to refer as the single page application grows.
Let’s get hand dirty and mind free from hassle of maintaining and forming lines cluttered code and creating mess in many files as web application grows.
Hope you understand what I mean, developers get frustrated to follow the best practice as in tight project deadlines,
Heads up on I am currently using 2Factor.in endpoints in this post as I were using part of the project implementation, we will head in list out numbers as steps needs to follow for the quick implementation:
We will save API key and API base URL in env file, (hope you are aware were it will lies in your project code, basically it lies at the core level of project director with named and with extension exactly, .env
3. Next we need to import publicRuntimeConfig object in our constants(.js) file
import { publicRuntimeConfig } from "./env.settings";
I am importing from .env.settings files which is actually using nextjs getConfig method to export publicRuntimeConfig variable, I am skipping that step to show here, once you search for docs on next/config you will get an idea what we are doing here.
4. Main part here it comes in contants.js file:
export const f2param1 = (param) => param || 1234657890;
export const f2param2 = (param) => param || "myTemplateName-OTP";
export function tagTemplate2FactorAPI(strings, param1, param2) {
const { SITE_2FACTORIN_API_BASE_URL, SITE_2FACTORIN_API_KEY } = publicRuntimeConfig;
const prefixBaseUrl = SITE_2FACTORIN_API_BASE_URL + SITE_2FACTORIN_API_KEY + '/';
let str0 = strings[0] || ""; // "That "
let str1 = strings[1] || ""; // " is a "
let str2 = strings[2] || ""; // "."
// We can even return a string built using a template literal
return `${prefixBaseUrl}${str0}${param1 || ''}${str1}${param2 || ''}${str2}`;
}
export const factor2API_Endpoint = {
CHECK_OTP_SMS_BALANCE: `BAL/SMS`,
SEND_OTP_SMS: tagTemplate2FactorAPI`SMS/${f2param1()}/AUTOGEN`,
SEND_OTP_SMS_TEMPLATE: tagTemplate2FactorAPI`SMS/${f2param1()}/AUTOGEN/${f2param2()}`,
SEND_VERIFY_SMS: tagTemplate2FactorAPI`SMS/VERIFY/${f2param1()}/${f2param2()}`,
CHECK_TRANS_SMS_BALANCE: `/ADDON_SERVICES/BAL/TRANSACTIONAL_SMS`,
SEND_TRANS_SMS: `/ADDON_SERVICES/SEND/TSMS`,
SEND_TRANS_SMS_DYNAMIC_TEMPLATE: `/ADDON_SERVICES/SEND/TSMS`,
};
console.log(factor2API_Endpoint.SEND_OTP_SMS);
console.log(factor2API_Endpoint.SEND_OTP_SMS_TEMPLATE);
console.log(factor2API_Endpoint.SEND_VERIFY_SMS);
This is how the final code looks, but there is a catch in this code, just need to handle of passing the params dynamically to the constants property of the object, otherwise with the fixed 2 params in same file would do the trick.
Will share once I got the way of passing dynamic params values to object property in template literal invocation line.
—— Here I found it the other approach —- Edited: 00:44 (after few mins of publishing this post after above approach shared 🙂 )
export function tagTemplate2FactorAPI(strings, ...keys) {
const { SITE_2FACTORIN_API_BASE_URL, SITE_2FACTORIN_API_KEY } = publicRuntimeConfig;
const prefixBaseUrl = SITE_2FACTORIN_API_BASE_URL + SITE_2FACTORIN_API_KEY + '/';
return (function (...values) {
let dict = values[values.length - 1] || {};
let result = [strings[0]];
keys.forEach(function (key, i) {
let value = Number.isInteger(key) ? values[key] : dict[key];
result.push(value, strings[i + 1]);
});
result.unshift(prefixBaseUrl); //added this line to prefix with base url path
return result.join('');
});
}
export const factor2API_Endpoint = {
CHECK_OTP_SMS_BALANCE: `BAL/SMS`,
SEND_OTP_SMS: tagTemplate2FactorAPI`SMS/${0}/AUTOGEN`,
SEND_OTP_SMS_TEMPLATE: tagTemplate2FactorAPI`SMS/${0}/AUTOGEN/${1}`,
SEND_VERIFY_SMS: tagTemplate2FactorAPI`SMS/VERIFY/${0}/${1}`,
CHECK_TRANS_SMS_BALANCE: `/ADDON_SERVICES/BAL/TRANSACTIONAL_SMS`,
SEND_TRANS_SMS: `/ADDON_SERVICES/SEND/TSMS`,
SEND_TRANS_SMS_DYNAMIC_TEMPLATE: `/ADDON_SERVICES/SEND/TSMS`,
};
console.log(factor2API_Endpoint.SEND_OTP_SMS(12311312, 'newTemplate-newOTP'));
console.log(factor2API_Endpoint.SEND_OTP_SMS_TEMPLATE(5656565, 'newTemplate-newOTP'));
console.log(factor2API_Endpoint.SEND_VERIFY_SMS(456646545, 'newTemplate-newOTP'));
Here is the quick solution I found and worked for me, hope it helps you too in some scenario we might mistaking
Pitcure (a)
As in the (a) was getting null as a data response in the react child component (where the text shown “Reset linked expired…”) , where actually data was updating from parent component and passed to react child component named <ResetPasswordForm … /> as ‘data’ as a prop, here its full code look like:
Solution 1 : To fix the issue of null, I have to remove the wrapping GlobalCookieContextProvider component as I was not passing any prop to it and also I have no use in this Reset Password Main component, so after removing the wrapping Provider component it worked like as expected, Boom!.
Results of JSON output attached to the form
Picture (b)
Hence start receiving data from parent react component when state change updated dynamically from URL query params as expected.
But wait, Solution 1, was not working still as expected in certain refreshes, then work around did and moved the all query params check code from nextjs page component to its child level component named ResetPasswordForm component and everything finally working as expected again.
Hope you enjoyed the post, let me know in comments if confused you, will try to re-try to post again.
Happy we learning!
Conclusion
First found the wrapping un-used React Provider component, causing a stop of re-ending of react child component when parent component state update done, but after some further testing its was still breaking, final solution found in moving the router query params check and updating state into the first level child component itself which does the expected checks in useEffect() and render the component fairly with the expected results on query fetch done.
Stumble upon in the search of adding Buy me coffee script into react application land to the following wonderful hook solution to add script to react on stack overflow here
I will also add up here the update code of stack overflow which helped in the solution (for incase above shared link will be changed in future, and all the code credit is to the author of stack overflow user)
Update:
Now that we have hooks, a better approach might be to use useEffect like so:
useEffect(() => {
const script = document.createElement('script');
script.src = "https://use.typekit.net/foobar.js";
script.async = true;
document.body.appendChild(script);
return () => {
document.body.removeChild(script);
}
}, []);
Which makes it a great candidate for a custom hook (eg: hooks/useScript.js):
import { useEffect } from 'react';
const useScript = url => {
useEffect(() => {
const script = document.createElement('script');
script.src = url;
script.async = true;
document.body.appendChild(script);
return () => {
document.body.removeChild(script);
}
}, [url]);
};
export default useScript;
Which can be used like so:
import useScript from 'hooks/useScript';
const MyComponent = props => {
useScript('https://use.typekit.net/foobar.js');
// rest of your component
}
Solution, I have added on top a ‘config’ param to the useScript function for easy BMC Buy me coffee widget attributes to get added to script object dynamically:
