Category: React

Sometimes, we want to get parameter value from query string with React.

In this article, we’ll look at how to get parameter value from query string with React.

How to get parameter value from query string with React?

To get parameter value from query string with React, we use the URLSearchParams constructor.

For instance, we write

const search = window.location.search;
const params = new URLSearchParams(search);
const foo = params.get("bar");

to get the query string with window.location.search.

Then we pass that in as the value of the URLSearchParams constructor.

And then we get the value of the query parameter with key bar with params.get("bar").

Conclusion

To get parameter value from query string with React, we use the URLSearchParams constructor.

Sometimes, we want to fix missing dependency warning when using useEffect React Hook.

In this article, we’ll look at how to fix missing dependency warning when using useEffect React Hook.

How to fix missing dependency warning when using useEffect React Hook?

To fix missing dependency warning when using useEffect React Hook, we should make sure we include any variables that are used in the useEffect callback that are states, props or functions in components.

For instance, we write

const Component = () => {
  /*...*/

  const fetchBusinesses = async () => {
    const res = await fetch("/api/businesses/");
    //...
  };

  useEffect(() => {
    fetchBusinesses();
  }, [fetchBusinesses]);

  /*...*/
};

to call useEffect with a callback that calls the fetchBusinesses function.

Since fetchBusinesses is a function in the Component component, we should include it in the array in the 2nd argument since it can change with states or props inside the function.

Conclusion

To fix missing dependency warning when using useEffect React Hook, we should make sure we include any variables that are used in the useEffect callback that are states, props or functions in components.

To detect browser in React, we use the react-device-detect package.

To install it, we run

npm i react-device-detect

Then we use it by writing

import { isMobile } from "react-device-detect";

function App() {
  if (isMobile) {
    return <div> This content is available only on mobile</div>;
  }
  return <div> ...content </div>;
}

to use the isMobile variable to check if the content is displayed in the mobile browser.

To mock the window size changing for a React component test with JavaScript, we can mock the window.screen.width property.

For instance, we write

jest.spyOn(window.screen, "width", "get").mockReturnValue(1000);

to call jest.spyOn to mock the window.screen.width getter property.

And we call mockReturnValue to set its return value to 1000.

To highlight text using React, we can use the react-highlighter module.

To install it, we run

npm i react-highlighter

Then we write

const Highlight = require("react-highlighter");

<Highlight search="brown">
  The quick brown fox jumps over the lazy dog
</Highlight>

to use the Highlight component to highlight 'brown' in 'The quick brown fox jumps over the lazy dog'.