Creating my own “recent blog posts” static Gutenberg block, can’t use react hooks in the frontend

That’s not how blocks work, the save component generates static HTML, so you can’t use interactive hooks or state.

The important part is that the save component only runs inside the editor on your browser. It does not run in the database, or on the client. You can’t save a react component to the database and render it with interactivity on the frontend.

Instead if you want to fetch the 3 latest posts you have 2 options:

  • enqueue a JS file on the frontend that fetches the posts from the REST API
  • save null and use PHP filters to render the 3 latest posts

The latter is how core does it for full site editing blocks

Related Posts:

  1. Hide gutenberg option blocks
  2. Disable block from editor based on post type
  3. WordPress v5.0.3 Gutenberg & JS error “Uncaught SyntaxError: missing ) after argument list”
  4. Gutenberg gallery hook errors
  5. What is the best filter where to use register_block_type?
  6. @wordpress/hooks use to add actions/filters within multiple plugin
  7. How to extend custom (non-core) blocks?
  8. Is it possible to switch Gutenberg’s editor styles when document settings change?
  9. How do I run an action after a featured image has been selected in the Gutenberg editor?
  10. WordPress How to reorder Page/Post Settings
  11. How To Apply Different Styles To All Blocks Based on Post Meta Value?
  12. getSaveContent.extraProps hook for core/post-title doesn’t add new attributes on to the frontend
  13. How to set Post ID from context to an attribute in child block of Gutenberg Query Loop
  14. How to get WordPress’ hooks/actions run sequence?
  15. Is there a hook before the user is authenticated?
  16. Hook into WordPress update?
  17. switch_to_blog(): Load textdomain
  18. Can I hook inside another hook?
  19. Adding function directly vs using hook in function.php
  20. How can I send to multiple Contact Form 7 recipients based on form input? [closed]
  21. Check if action hook exists before adding actions to it
  22. getEntityRecord without knowing the post type
  23. Post-Registration, post-meta hook?
  24. Removing action added from constructor
  25. after login that will redirect user role into a page
  26. Create hooks based on an array of hook names?
  27. Access post meta just after publishing
  28. update post meta using user_register hook not working
  29. how to create endpoint for downloading pdf files?
  30. hook to get (and change) the search string before processing
  31. Is there a recover_post hook to go with trash_post hook?
  32. How to override languages files in wp-content/languages/themes with child theme
  33. hooks & filters and variables
  34. How to increase password requirements for registration [closed]
  35. Can user_register output the password?
  36. How to change title attribute returned by comments_popup_link()?
  37. How to use do_action_ref_array?
  38. Problem using role_has_cap hook
  39. How to find hooks as per Just-In-Time approach?
  40. WordPress action and filter hooks runs asynchronously?
  41. Prevent attachment from being deleted
  42. Update post meta using pending_to_publish hook
  43. Get log of function/method calls made by do_action() on WordPress initialization
  44. Is it possible to change image urls by hooks?
  45. User update hook
  46. register_activation_hook not updating
  47. Redirect customer to login if not logged in when proceeding to checkout
  48. PHP header() gives headers already sent
  49. Send along login credentials with comment content
  50. How to replace a function using a child theme?
  51. WP_query hooks before execute a search query
  52. How to pass argument to wp_footer hook with data from a template
  53. Redirecting from login
  54. How to use a 3rd party library to send emails?
  55. I would like to send a notification email (Asana) whenever something is published (posts, pages, custom post types) [duplicate]
  56. Woocommerce table is missing a heading–can I add it by use of a hook?
  57. Use a variable created in get_header to calculate stuff in wp_footer
  58. register_deactivation_hook argument -> pass arguments in the selected function
  59. Alternative to new_to_publish Hook for Custom Statuses
  60. How to use a WooCommerce action hook?
  61. Force file download in WordPress
  62. How to use pre_get_posts
  63. hooks for automatic approve user registration according to data in custom fields
  64. How to render an element, that was saved as a template, using a hook?
  65. How to use embed_content hook?
  66. Notify admin when Custom post meta data gets updated or deletet
  67. WP Cron not executing after timespan
  68. Action hook with wrapper html
  69. WordPress add_action the_post hook
  70. Post via wp-admin and via iOS app, same hooks and triggers involved?
  71. add_action hook for links.php page
  72. Hooking after blog info update
  73. Hook to add_action(‘updated_option_my_option’, [$this, ‘save_data’], 10, 3]);
  74. Session management issues with WordPRess 404 Error page
  75. Template_redirect works, but headers aren’t sent when checking via cURL
  76. template_redirect hooks redirect wrong URL
  77. Registered custom dynamic tag not appearing
  78. Add a Call to Action Button to WordPress Post Thumbnail
  79. How to hook add_action() into after category description with id?
  80. What hook can you use to get the full response?
  81. Easy Digital Downloads – How to use hooks correctly?
  82. Updating a related post’s “post_modified” value
  83. adding wordpress yoast SEO canonical url from “transition_post_status” hook
  84. Cookie cant be read even cookie is present
  85. How to create callback function which returns all posts with specific data?
  86. How to trigger click events using hooks
  87. remove_action() hook not working
  88. Why the post ID is 0 in a hook within wp_insert_post_data?
  89. Function Hooked on Init Running Multiple Times
  90. How to work with hooks and Posts to posts plugin?
  91. template_redirect and title
  92. When is get_currentuserinfo() needed?
  93. disable publish button until condition is not met
  94. How do I remove an action hook by s2member
  95. How do I change TinyMCE button “i” to create a i tag rather than em? [duplicate]
  96. How can I modify the code generated for a PDF by the Add Media button in Classic Editor?
  97. Do New_to_publish hooks work for custom post types
  98. Is there any filter or action hook to remove layout classes from appearing in my templates?
  99. How to add more elements to an already existing section in Gutenberg
  100. What is the proper way of using React Hooks in Gutenberg on frontend?