CODEWITHSUNDEEP
reactjsreact-hooksreact-context
Zocatelli
Zocatelli

Reputation: 338

Pass function to Context API

I'm dealing with a mix of function components and class components. Every time a click happens in the NavBar I want to trigger the function to validate the Form, it has 5 forms, so each time I'm going to have to set a new function inside the context API.

Context.js

import React, { createContext, useContext, useState } from "react";

const NavigationContext = createContext({});

const NavigationProvider = ({ children }) => {
  const [valid, setValid] = useState(false);
  const [checkForm, setCheckForm] = useState(null);

  return (
    <NavigationContext.Provider value={{ valid, setValid, checkForm, setCheckForm }}>
      {children}
    </NavigationContext.Provider>
  );
};

const useNavigation = () => {
  const context = useContext(NavigationContext);

  if (!context) {
    throw new Error("useNavigation must be used within a NavigationProvider");
  }

  return context;
};

export { NavigationProvider, useNavigation, NavigationContext};

Form.js

import React, { Component } from "react";

import { NavigationContext } from "../hooks/context";

class Something extends Component {
  
  static contextType = NavigationContext;


  onClickNext = () => {
    // This is the funcion I want to set inside the Context API
    if(true){
     return true
    }
    
    return false;
  };

  render() {

    const { setCheckForm } = this.context;
    setCheckForm(() => () => console.log("Work FFS"));

    return (
      <>
        <Button
          onClick={this.onClickNext}
        />
      </>
    );
  }
}

export default Something;

The problem when setting the function it throws this error:

Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

And setting like setCheckForm(() => console.log("Work FFS"));, it triggers when rendered.

Upvotes: 0

Views: 1801

Answers (1)

kulkalkul
kulkalkul

Reputation: 291

Render method of React.Component runs whenever state changes and setCheckForm updates the state whenever that render happens. This creates an infinite loop, this is the issue you are having there.

So, this is a lifecycle effect, you have to use that function inside componentDidMount if you want to set it when the component first loads.

While this solves your problem, I wouldn't suggest doing something like this. React's mental model is top to bottom, data flows from parent to child. So, in this case, you should know which component you are rendering from the parent component, and if you know which component to render, that means you already know that function which component is going to provide to you. So, while it is possible in your way, I don't think it is a correct and Reactish way to handle it; and it is probably prone to break.

Upvotes: 1

Related Questions