How to create a custom hook that recives dependencies?

react hooks
custom hooks
useeffect
react-hooks/exhaustive-deps
usememo
react hooks example
usestate hook callback
install react hooks

I'm making a custom hook that have a toogle when some state change.

You should be able to pass any state in an array.

import { useState, useEffect } from 'react'

const useFlatListUpdate = (dependencies = []) => {
    const [toggle, setToggle] = useState(false)

    useEffect(() => {
        setToggle(t => !t)
    }, [...dependencies])

    return toggle
}

export default useFlatListUpdate

And it should be used as

const toggleFlatList = useFlatListUpdate([search, selectedField /*, anything */])

But it gives me the following warning

React Hook useEffect has a spread element in its dependency array. This means we can't statically verify whether you've passed the correct dependencies.eslint(react-hooks/exhaustive-deps)

I also have another situation where it doesn't work

const useFlatListUpdate = (dependencies = []) => {
    const [toggle, setToggle] = useState(false)

    useEffect(() => {
        setToggle(t => !t)
    }, dependencies)

    return toggle
}

This gives me the warning

React Hook useEffect was passed a dependency list that is not an array literal. This means we can't statically verify whether you've passed the correct dependencies.eslint(react-hooks/exhaustive-deps)

How can I make this work without the warning and without disabling eslint?

Use of dependency list is very peculiar in this case. I do not see other way except ignoring or silencing the warning.

To silence the warning, we do not have to disable eslint completely. You can disable this specific rule for this specific line:

const useFlatListUpdate = (dependencies = []) => {
    const [toggle, setToggle] = useState(false)

    /* eslint-disable react-hooks/exhaustive-deps */
    useEffect(() => {
        setToggle(t => !t)
    }, [...dependencies])

    return toggle
}

Writing a Reusable Custom React Hook, Now that I have a place to store my custom hooks I can start writing my own! Inside the hooks directory, I'm going to create a file called http.js since the primary Something new, however, is how I receive the dependencies. Just like in a component, make sure to only call other Hooks unconditionally at the top level of your custom Hook. Unlike a React component, a custom Hook doesn’t need to have a specific signature. We can decide what it takes as arguments, and what, if anything, it should return.

Do you really need to create a custom hook as per the question.

You can use useEffect to check whether your dependency has changed or not if it is changed set the toggle something like this in your component.

const [toggle, setToggle] = useState(false);
useEffect(() =>{
  setToggle(!toggle);
}, [yourDepndency]);

Help me to understand if I have understood your requirement correctly.

Building Your Own Hooks – React, Building your own Hooks lets you extract component logic into reusable functions​. When we A custom Hook is a JavaScript function whose name starts with ” use ” and that may call other Hooks. Each call to a Hook gets isolated state. Our custom hook means we can keep category as a const, keep the original definition order, and the only logic we have to implement is the check as to whether the prevState value is still valid. Conclusion Hopefully this custom hook may prove useful to anyone facing a similar issue with state whose validity depends on some dependencies.

Do not use spread operator in useEffect input, more like this:

useEffect(() => {
  effect
  return () => {
    cleanup
  }
}, [input])

Writing Your Own Custom React Hooks, Useful tip: Use Bit to encapsulate components with all their dependencies and setup. You can create a third function with this common logic and implement it Yeah, so before you start writing your own custom hooks there is a VERY Our component receives the three states and uses them as required. The native React Hooks can be combined to create custom hooks to support complex cases. a component that receives an object as a prop, and we want to run an effect every time one of the

A React hook to handle state with dependencies, A description of a custom React hook that can simplify dealing with While building the app, I created something I call a "dependent state" custom hook. options by mapping over the data from an API call received as a prop. You can take this hook or any other custom hook to a whole new level with your imagination. It’s much easy and cleaner than render props and HOC. Conclusion. In this article, we learned about some cool stuff related to React’s Custom Hooks. Building these hooks seems like an art to me.

How to write custom hooks in React, Custom hooks allow you to create functionality that can be reused across The second argument to useEffect, an empty array of dependencies, the state updates, the hook function gets called again with the latest state, and  Simply put, the Spring Boot autoconfiguration represents a way to automatically configure a Spring application based on the dependencies that are present on the classpath. This can make development faster and easier by eliminating the need for defining certain beans that are included in the auto-configuration classes.

How to Create a Custom React Hook and Publish it to npm, How can we build a custom hook and share it with the rest of the world? setup scripts which install dependencies and update the hook to the name we want. In this particular instance, our type is gif , so we'll receive a gif. To receive WebHooks using Microsoft ASP.NET WebHooks, you first install the Nuget package for the WebHook provider or providers you want to receive WebHooks from. The Nuget packages are named Microsoft.AspNet.WebHooks.Receivers.* where the last part indicates the service supported.

Comments
  • You are right. My answer is dead-wrong. I deleted it not to confuse you and others further. I apologize 🙏
  • @dance2die Your answer wasn't wrong, but it just gave another type of warning.
  • Thanks for the kind words. I wasn't able to get it working with refs either so I will leave this matter to others :)
  • for your second example just put dependencies inside an array: useEffect(() => { setToggle(t => !t) }, [dependencies])
  • When possible, please make an effort to provide additional explanation instead of just code. Such answers tend to be more useful as they help members of the community and especially new developers better understand the reasoning of the solution, and can help prevent the need to address follow-up questions.
  • Sorry for the short description, but my intention was to explain an inappropriate use, in my opinion, of spread operator in the input of use effect hook.