⭐️ If you like reactpatterns, give it a star on GitHub! ⭐️
Menu
React PatternsReact Patternsreactpatterns
HomeBlogGitHub
React PatternsReact Patternsreactpatterns
  • Home
  • Blog
  • GitHub
  • React Patterns
    • Introduction
    • Proxy component
    • Make the API call
    • Stateless function
    • Higher-Order function
    • Higher-Order component
    • Accessing a child component
    • JSX spread attributes
    • Render callback
    • Function as child component
    • Function as prop component
    • Component injection
    • Conditional rendering
      • If else
      • Ternary operation
      • Logical && operator
      • Switch case operator
      • Conditional rendering with enum
      • Multi-level conditional rendering
      • With higher order component
      • External templating component
    • Destructuring
      • What is destructuring?
      • Destructuring function argument
      • Nested destructuring
      • Destructuring rest/spread operator
    • Promises over callbacks
    • Container component (Stateful component)
    • State hoisting
    • Pure component avoid heavy re-render
  • React Anti-patterns
    • Props in initial state is an anti-pattern
    • shouldComponentUpdate avoid heavy re-renders
    • Indexes as a key is an anti-pattern
    • Spreading props on DOM elements is an anti-pattern

Render Callback

For example below, notice that we create a function foo which takes a callback function as a parameter. When we call foo, it turns around and calls back to the passed-in function.

const foo = (hello) => {
return hello('foo')
}
foo((name) => {
return `hello from ${name}`
})
// hello from foo

As you can see, foo used the callback function to complete a portion of a string.

In the React world, a render callback works the same way, but returning a portion of the rendered markup.

Previous
« JSX Spread Attributes
Next
Function as Child Component »

Docs

  • Home

Community

  • Twitter
  • Facebook
  • LinkedIn

More

  • Blog
  • GitHub
Copyright © 2021 React Patterns Org.